Merge pull request #230 from PhilippeVay/sass-lint

sass-lintage (indentation, imbrication, clarté, etc)

.sass-lint.yml

@@ -0,0 +1,91 @@
+options:
+  formatter: stylish
+files:
+  include: '**/*.s+(a|c)ss'
+rules:
+  # Extends
+  extends-before-mixins: 1
+  extends-before-declarations: 1
+  placeholder-in-extend: 1
+
+  # Mixins
+  mixins-before-declarations: 1
+
+  # Line Spacing
+  one-declaration-per-line: 1
+  empty-line-between-blocks: 1
+  single-line-per-selector: 1
+
+  # Disallows
+  no-attribute-selectors: 0
+  no-color-hex: 0
+  no-color-keywords: 0 # Modified, was 1
+  no-color-literals: 0 # Modified, was 1
+  no-combinators: 0
+  no-css-comments: 0 # Modified, was 1
+  no-debug: 1
+  no-disallowed-properties: 0
+  no-duplicate-properties: 1
+  no-empty-rulesets: 1
+  no-extends: 0
+  no-ids: 1
+  no-important: 0 # Modified, was 1
+  no-invalid-hex: 1
+  no-mergeable-selectors: 1
+  no-misspelled-properties: 1
+  no-qualifying-elements: 1
+  no-trailing-whitespace: 1
+  no-trailing-zero: 1
+  no-transition-all: 1
+  no-universal-selectors: 0
+  no-url-protocols: 1
+  no-vendor-prefixes: 1
+  no-warn: 1
+  property-units: 0
+
+  # Nesting
+  force-attribute-nesting: 1
+  force-element-nesting: 1
+  force-pseudo-nesting: 1
+
+  # Name Formats
+  class-name-format: 1
+  function-name-format: 1
+  id-name-format: 0
+  mixin-name-format: 1
+  placeholder-name-format: 1
+  variable-name-format: 1
+
+  # Style Guide
+  attribute-quotes: 1
+  bem-depth: 0
+  border-zero: 0 # Modified, was 1
+  brace-style: 1
+  clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
+  empty-args: 1
+  hex-length: 1
+  hex-notation: 1
+  indentation: 1
+  leading-zero: 0 # Modified, was 1
+  nesting-depth: 1
+  property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
+  pseudo-element: 1
+  quotes: 0 # 1 warns that strings should use single quotes
+  shorthand-values: 1
+  url-quotes: 1
+  variable-for-property: 1
+  zero-unit: 1
+
+  # Inner Spacing
+  space-after-comma: 1
+  space-before-colon: 1
+  space-after-colon: 1
+  space-before-brace: 1
+  space-before-bang: 1
+  space-after-bang: 1
+  space-between-parens: 1
+  space-around-operator: 1
+
+  # Final Items
+  trailing-semicolon: 1
+  final-newline: 1

css/grillade.scss

@@ -87,6 +87,7 @@ $iefix: 0.01px;
     }
   }
 }
+
 // Grid offsets
 .push {
   margin-left: auto !important;
@@ -95,6 +96,7 @@ $iefix: 0.01px;
 .pull {
   margin-right: auto !important;
 }
+
 // Grid order
 .item-first {
   order: -1;

css/knacss-unminified.css

@@ -415,7 +415,7 @@ body {
 
 a {
   color: #333; }
-  a:hover, a:focus, a:active {
+  a:focus, a:hover, a:active {
     color: #000; }
 
 ul,
@@ -624,7 +624,9 @@ img {
 /* ==Stylings (minor stylings)   */
 /* ----------------------------- */
 /* styling elements */
-code, kbd, mark {
+code,
+kbd,
+mark {
   border-radius: 2px; }
 
 kbd {
@@ -675,7 +677,6 @@ blockquote > footer {
   margin-top: .75em;
   font-size: 0.9em;
   color: rgba(0, 0, 0, 0.7); }
-
   blockquote > footer::before {
     content: "\2014 \0020"; }
 
@@ -685,7 +686,6 @@ q {
 q,
 .q {
   quotes: "“\00a0" "\00a0”"; }
-
   q:lang(fr),
   .q:lang(fr) {
     quotes: "«\00a0" "\00a0»"; }
@@ -837,10 +837,7 @@ select {
 /* if select styling bugs on WebKit */
 /* select { -webkit-appearance: none; } */
 /* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
   display: none; }
 
 ::-webkit-input-placeholder {
@@ -906,6 +903,7 @@ input[type="reset"].unstyled {
             flex-direction: row-reverse; }
   .o-media-figure--center {
     -ms-flex-item-align: center;
+        -ms-grid-row-align: center;
         align-self: center; } }
 
 /* Autogrid object */
@@ -1074,8 +1072,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
   -webkit-filter: grayscale(1);
           filter: grayscale(1); }
 
-ul.is-unstyled,
+ul.is-unstyled, ul.unstyled {
-ul.unstyled {
   list-style: none;
   padding-left: 0; }
 

sass/grids/_grillade.scss

@@ -77,6 +77,7 @@ $iefix: 0.01px;
     }
   }
 }
+
 // Grid offsets
 .push {
   margin-left: auto !important;
@@ -85,6 +86,7 @@ $iefix: 0.01px;
 .pull {
   margin-right: auto !important;
 }
+
 // Grid order
 .item-first {
   order: -1;

sass/library/_base.scss

@@ -29,7 +29,10 @@ body {
 
 a {
   color: $link-color;
-  &:hover, &:focus, &:active {
+
+  &:focus,
+  &:hover,
+  &:active {
     color: $link-hover-color;
   }
 }

sass/library/_forms.scss

@@ -60,12 +60,14 @@ select {
 /* select { -webkit-appearance: none; } */
 
 /* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
+input[type="search"] {
-input[type="search"]::-webkit-search-cancel-button,
+  &::-webkit-search-decoration,
-input[type="search"]::-webkit-search-results-button,
+  &::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-decoration {
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
     display: none;
   }
+}
 
 ::-webkit-input-placeholder {
   color: #777;
@@ -76,22 +78,25 @@ textarea:-moz-placeholder {
   color: #777;
 }
 
-.#{$kna-namespace}btn:focus,
+.#{$kna-namespace}btn,
-input[type="button"]:focus,
+input[type="button"],
-button:focus {
+button {
+  &:focus {
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
   }
+}
 
 /* unstyled forms */
 
-button.#{$kna-namespace}unstyled,
+button,
-input[type="button"].#{$kna-namespace}unstyled,
+input[type="button"],
-input[type="submit"].#{$kna-namespace}unstyled,
+input[type="submit"],
-input[type="reset"].#{$kna-namespace}unstyled {
+input[type="reset"] {
+  &.#{$kna-namespace}unstyled {
     padding: 0;
     border: none;
     line-height: 1;
@@ -108,3 +113,4 @@ input[type="reset"].#{$kna-namespace}unstyled {
       outline: none;
     }
   }
+}

sass/library/_print.scss

@@ -88,8 +88,10 @@
   }
   */
 
-  a[href^="javascript:"]::after,
+  a[href^="javascript:"],
-  a[href^="#"]::after {
+  a[href^="#"] {
+    &::after {
       content: "";
     }
   }
+}

sass/library/_styling.scss

@@ -3,7 +3,9 @@
 /* ----------------------------- */
 
 /* styling elements */
-code, kbd, mark {
+code,
+kbd,
+mark {
   border-radius: 2px;
 }
 
@@ -64,11 +66,11 @@ blockquote > footer {
   margin-top: .75em;
   font-size: 0.9em;
   color: rgba(0, 0, 0, .7);
-}
 
-blockquote > footer::before {
+  &::before {
     content: "\2014 \0020";
   }
+}
 
 q {
   font-style: normal;
@@ -77,12 +79,11 @@ q {
 q,
 .#{$kna-namespace}q {
   quotes: "“\00a0" "\00a0”";
-}
 
-q:lang(fr),
+  &:lang(fr) {
-.#{$kna-namespace}q:lang(fr) {
     quotes: "«\00a0" "\00a0»";
   }
+}
 
 hr {
   display: block;

sass/objects/_autogrid.scss

@@ -4,6 +4,7 @@
   [class*=" autogrid"] {
     display: flex;
   }
+
   [class^="autogrid"] > *,
   [class*=" autogrid"] > * {
     flex: 1;
@@ -16,6 +17,7 @@
   .has-gutter > *:not(:first-child) {
     margin-left: 1rem;
   }
+
   [class*="--reverse"] {
     flex-direction: row-reverse;
   }

sass/objects/_media.scss

@@ -4,6 +4,7 @@
     display: flex;
     align-items: flex-start;
   }
+
   .o-media-content {
     flex: 1;
     min-width: 0; /* avoid min-width:auto */
@@ -15,6 +16,7 @@
   .o-media--reverse {
     flex-direction: row-reverse;
   }
+
   .o-media-figure--center {
     align-self: center;
   }

sass/utilities/_helpers.scss

@@ -30,11 +30,13 @@
   filter: grayscale(1);
 }
 
-ul.is-unstyled,
+ul {
-ul.unstyled {
+  &.is-unstyled,
+  &.unstyled {
     list-style: none;
     padding-left: 0;
   }
+}
 
 /* Width Helpers */
 /* ------------- */

sass/utilities/_wordpress.scss

@@ -20,23 +20,19 @@ Description: Reset styles for WordPress usage of KNACSS
 .comment-navigation,
 .paging-navigation,
 .post-navigation {
-  margin: 0 0 1.5em;
   overflow: hidden;
-}
+  margin: 0 0 1.5em;
 
-.comment-navigation .nav-previous,
+  & .nav-previous {
-.paging-navigation .nav-previous,
-.post-navigation .nav-previous {
     float: left;
     width: 50%;
   }
 
-.comment-navigation .nav-next,
+  & .nav-next {
-.paging-navigation .nav-next,
-.post-navigation .nav-next {
     float: right;
-  text-align: right;
     width: 50%;
+    text-align: right;
+  }
 }
 
 // class in img elements
@@ -64,7 +60,8 @@ Description: Reset styles for WordPress usage of KNACSS
 .comment-content {
   clear: both;
 
-  &::after, &::before {
+  &::after,
+  &::before {
     content: "";
     display: table;
   }
@@ -115,7 +112,7 @@ Description: Reset styles for WordPress usage of KNACSS
   }
 }
 
-// class for categorie
+// class for category
 .category- {
   &name-of-category {
   }
@@ -128,6 +125,7 @@ Description: Reset styles for WordPress usage of KNACSS
   // if display posts
   &.blog {
   }
+
   // if static page
   &.page {
   }
@@ -138,6 +136,7 @@ Description: Reset styles for WordPress usage of KNACSS
   // if is frontpage
   &.home {
   }
+
   // if static page
   &.page {
   }
@@ -160,6 +159,7 @@ Description: Reset styles for WordPress usage of KNACSS
   // if has results
   .search-results {
   }
+
   // if has no results
   .search-no-results {
   }