Merge pull request #372 from larsmunkholm/dollar-variable-first-in-block

Added rule for dollar-variable-first-in-block

README.md

@@ -103,6 +103,7 @@ Please also see the [example configs](./docs/examples/) for special cases.
 - [`dollar-variable-default`](./src/rules/dollar-variable-default/README.md): Require `!default` flag for `$`-variable declarations.
 - [`dollar-variable-empty-line-after`](./src/rules/dollar-variable-empty-line-after/README.md): Require a single empty line or disallow empty lines after `$`-variable declarations (Autofixable).
 - [`dollar-variable-empty-line-before`](./src/rules/dollar-variable-empty-line-before/README.md): Require a single empty line or disallow empty lines before `$`-variable declarations (Autofixable).
+- [`dollar-variable-first-in-block`](./src/rules/dollar-variable-first-in-block/README.md): Require for variables to be put first in a block (a rule or in root).
 - [`dollar-variable-no-missing-interpolation`](./src/rules/dollar-variable-no-missing-interpolation/README.md): Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.
 - [`dollar-variable-pattern`](./src/rules/dollar-variable-pattern/README.md): Specify a pattern for Sass-like variables.
 

src/rules/dollar-variable-first-in-block/README.md

@@ -0,0 +1,191 @@
+# 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:
+
+```scss
+@import '1.css';
+$var: 200px;
+```
+
+```scss
+a {
+  width: 100px;
+  $var: 1;
+}
+```
+
+The following patterns are *not* considered warnings:
+
+```scss
+$var: 100px;
+@import '1.css';
+```
+
+```scss
+a {
+  $var: 1;
+  color: red;
+}
+```
+
+## Optional secondary options
+
+### `ignore: ["comments", "imports"]`
+
+### `"comments"`
+
+The following patterns are *not* considered violations:
+
+```scss
+// Comment
+$var: 1;
+```
+
+```scss
+a {
+  // Comment
+  $var: 1;
+  color: red;
+}
+```
+
+### `"imports"`
+
+The following patterns are *not* considered violations:
+
+```scss
+@import '1.css';
+$var: 1;
+```
+
+### `except: ["root", "at-rule", "function", "mixin", "if-else", "loops"]`
+
+### `"root"`
+
+The following patterns are *not* considered warnings:
+
+```scss
+// Imports
+@import '1.css';
+
+// Variables
+$var: 1;
+```
+
+```scss
+/* Imports */
+@import '1.css';
+// Variables
+$var1: 1;
+$var2: 1;
+
+a {
+  width: 100px;
+}
+```
+
+### `"at-rule"`
+
+The following patterns are *not* considered warnings:
+
+```scss
+@at-root .class {
+  width: 100px;
+  $var: 1;
+}
+```
+
+### `"function"`
+
+The following patterns are *not* considered warnings:
+
+```scss
+@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:
+
+```scss
+@mixin mixin-name {
+  width: 100px;
+  $var: 1000px;
+  height: $var1;
+}
+```
+
+### `"if-else"`
+
+The following patterns are *not* considered warnings:
+
+```scss
+@if $direction == up {
+  width: 100px;
+  $var: 1000px;
+}
+```
+
+```scss
+@if $direction == up {
+  width: 100px;
+} @else {
+  height: 100px;
+  $var: 1000px;
+}
+```
+
+```scss
+@if $direction == up {
+  width: 100px;
+  $var1: 1000px;
+} @else {
+  height: 100px;
+  $var2: 1000px;
+}
+```
+
+### `"loops"`
+
+The following patterns are *not* considered warnings:
+
+```scss
+@each $size in $sizes {
+  width: 100px;
+  $var: 1000px;
+}
+```
+
+```scss
+@for $i from 1 through 3 {
+  width: 100px;
+  $var: 1000px;
+}
+```
+
+```scss
+@while $value > $base {
+  width: 100px;
+  $var: 1000px;
+}
+```