Add sasslint

.sass-lint.yml

@@ -0,0 +1,49 @@
+files:
+  include:
+    - 'src/**/*.s+(a|c)ss'
+
+# Linter Options
+options:
+  merge-default-rules: false
+
+# Rule Configuration
+rules:
+  brace-style:
+    - 2
+    -
+      style: 'stroustrup'
+      clean-import-paths: 2
+  extends-before-declarations: 2
+  extends-before-mixins: 2
+  final-newline: 2
+  indentation:
+    - 2
+    -
+      size: 4
+  leading-zero:
+    - 2
+    -
+      include: true
+  no-css-comments: 2
+  no-debug: 1
+  no-empty-rulesets: 2
+  no-ids: 1
+  no-important: 1
+  no-invalid-hex: 2
+  no-misspelled-properties:
+    - 2
+    -
+      extra-properties:
+        - 'touch-callout'
+        - 'overflow-scrolling'
+  no-vendor-prefixes: 1
+  no-warn: 1
+  one-declaration-per-line: 2
+  single-line-per-selector: 2
+  space-after-colon: 2
+  space-after-comma: 2
+  space-around-operator: 2
+  space-before-bang: 2
+  space-before-brace: 2
+  trailing-semicolon: 2
+  zero-unit: 2

package.json

@@ -8,7 +8,8 @@
     "eslint": "./node_modules/.bin/eslint src/*.js",
     "accessibility": "node ./dev/accessibility-validation.js",
     "htmllint": "node ./dev/html-validator.js",
-    "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint",
+    "sasslint": "node ./node_modules/sass-lint/bin/sass-lint.js -v -q",
+    "test": "npm run build && karma start && npm run eslint && npm run accessibility && npm run htmllint && npm run sasslint",
     "build": "rm -rf dist/ && webpack -p"
   },
   "keywords": [
@@ -41,6 +42,7 @@
     "karma-webpack": "^2.0.3",
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.3.3",
+    "sass-lint": "^1.10.2",
     "sass-loader": "^6.0.3",
     "style-loader": "^0.13.2",
     "url-loader": "^0.5.8",

src/assets/styles/atoms/_buttons.scss

@@ -6,7 +6,7 @@
     font-weight: $action-default-font-weight;
     padding: $indent-base $indent-xl;
     text-decoration: none;
-    transition: all .3s;
+    transition: all 0.3s;
 
     &.primary {
         border-color: $action-primary-border;

src/assets/styles/base/_variables.scss

@@ -40,4 +40,4 @@ $action-primary-border:         $color-primary;
 
 $action-secondary-color:        $color-white;
 $action-secondary-bg:           $color-secondary;
-$action-secondary-border:       $color-secondary;
+$action-secondary-border:       $color-secondary;

src/assets/styles/organisms/_header.scss

@@ -8,4 +8,4 @@
         display: flex;
         justify-content: space-around;
     }
-}
+}

src/assets/styles/vendor/_burger.scss

@@ -5,27 +5,21 @@
 // (---) bottom -> &::after
 
 
-// Vendor prefixes
-$sass-burger-add-vendor-prefixes: true !default;
 
 // Burger
-@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) {
+@mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: 0.3s) {
     $burger-height: $height !global;
     $burger-gutter: $gutter !global;
 
     position: relative;
     margin-top: $height + $gutter;
     margin-bottom: $height + $gutter;
-
-    @if $sass-burger-add-vendor-prefixes {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-    }
     user-select: none;
 
     // 1. Fixes jagged edges in Firefox, see issue #10.
-    &, &::before, &::after {
+    &,
+    &::before,
+    &::after {
         display: block;
         width: $width;
         height: $height;
@@ -34,23 +28,12 @@ $sass-burger-add-vendor-prefixes: true !default;
         @if $border-radius != 0 {
             border-radius: $border-radius;
         }
-
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transition-property: background-color, -webkit-transform;
-            -moz-transition-property: background-color, -moz-transform;
-            -o-transition-property: background-color, -o-transform;
-        }
         transition-property: background-color, transform;
-
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transition-duration: $transition-duration;
-            -moz-transition-duration: $transition-duration;
-            -o-transition-duration: $transition-duration;
-        }
         transition-duration: $transition-duration;
     }
 
-    &::before, &::after {
+    &::before,
+    &::after {
         position: absolute;
         content: "";
     }
@@ -67,7 +50,9 @@ $sass-burger-add-vendor-prefixes: true !default;
 
 // Select parts of the burger
 @mixin burger-parts {
-    &, &::before, &::after {
+    &,
+    &::before,
+    &::after {
         @content;
     }
 }
@@ -96,27 +81,19 @@ $sass-burger-add-vendor-prefixes: true !default;
     & {
         background-color: transparent;
     }
+
     @if ($color != auto) {
-        &::before, &::after {
+        &::before,
+        &::after {
             background-color: $color;
         }
     }
+
     &::before {
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -moz-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -ms-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-            -o-transform: translateY($burger-gutter + $burger-height) rotate(45deg);
-        }
         transform: translateY($burger-gutter + $burger-height) rotate(45deg);
     }
+
     &::after {
-        @if $sass-burger-add-vendor-prefixes {
-            -webkit-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -moz-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -ms-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-            -o-transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
-        }
         transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg);
     }
 }