README.md

dollar-variable-first-in-block

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

Options

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;
}

Optional secondary options

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;

@use "sass:color";
$primary-color: #f26e21 !default;
$secondary-color: color.change($primary-color, $alpha: 0.08) !default;

@forward "src/list";
$var1: 100px;

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;
}