dollar-variable-first-in-block.md

Pattern: Misplaced $-variable in block

Issue: -

Description

Require $-variable declarations to be placed first in a block (root or a rule).

Examples

true

The following patterns are considered violations:

@import '1.css';
$var: 200px;

a {
  width: 100px;
  $var: 1;
}

The following patterns are not considered warnings:

$var: 100px;
@import '1.css';

a {
  $var: 1;
  color: red;
}

Configuration

ignore: ["comments", "imports"]

"comments"

The following patterns are not considered violations:

// Comment
$var: 1;

a {
  // Comment
  $var: 1;
  color: red;
}

"imports"

The following patterns are not considered violations:

@import '1.css';
$var: 1;

except: ["root", "at-rule", "function", "mixin", "if-else", "loops"]

"root"

The following patterns are not considered warnings:

// Imports
@import '1.css';

// Variables
$var: 1;

/* Imports */
@import '1.css';
// Variables
$var1: 1;
$var2: 1;

a {
  width: 100px;
}

"at-rule"

The following patterns are not considered warnings:

@at-root .class {
  width: 100px;
  $var: 1;
}

"function"

The following patterns are not considered warnings:

@function function-name($numbers1, $numbers2) {
  $var1: 1;

  @each $number in $numbers1 {
    $var1: $var1 + $number;
  }

  $var: 2;

  @each $number in $numbers2 {
    $var2: $var2 + $number;
  }

  @return $var1 + $var2;
}

"mixin"

The following patterns are not considered warnings:

@mixin mixin-name {
  width: 100px;
  $var: 1000px;
  height: $var1;
}

"if-else"

The following patterns are not considered warnings:

@if $direction == up {
  width: 100px;
  $var: 1000px;
}

@if $direction == up {
  width: 100px;
} @else {
  height: 100px;
  $var: 1000px;
}

@if $direction == up {
  width: 100px;
  $var1: 1000px;
} @else {
  height: 100px;
  $var2: 1000px;
}

"loops"

The following patterns are not considered warnings:

@each $size in $sizes {
  width: 100px;
  $var: 1000px;
}

@for $i from 1 through 3 {
  width: 100px;
  $var: 1000px;
}

@while $value > $base {
  width: 100px;
  $var: 1000px;
}

Further Reading

• stylelint-scss - dollar-variable-first-in-block