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

@@ -33,7 +33,7 @@ $iefix: 0.01px;
 }
 // Multi-line grid constructor
 // example : .grid-perso { @include grid(12, 3rem); }
-@mixin grid($grid-number:1, $own-gutter:0) {
+@mixin grid($grid-number: 1, $own-gutter: 0) {
   & > * {
     width: calc(100% / #{$grid-number} - #{$iefix});
   }
@@ -81,12 +81,13 @@ $iefix: 0.01px;
 }
 // Constructing grids : will be compiled in CSS
 @media (min-width: ($tiny + 1)) {
-   @for $i from 2 through 12{
+  @for $i from 2 through 12 {
     [class*="grid-#{$i}"] {
-      @include grid(#{$i},0);
+      @include grid(#{$i}, 0);
     }
   }
 }
+
 // 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;
@@ -109,7 +111,7 @@ $iefix: 0.01px;
 }
 // sizing individual children
 @media (min-width: ($tiny + 1)) {
-   @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
+  @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
     .#{$flow} {
       flex: 0 0 auto;
       width: calc(100% / #{$divider} - #{$iefix});
@@ -125,7 +127,7 @@ $iefix: 0.01px;
 // -small-X suffix means "X columns on small-medium screen"
 // example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
 @media (min-width: ($tiny + 1)) and (max-width: $medium) {
-   @for $i from 1 through 4{
+  @for $i from 1 through 4 {
     [class*="-small-#{$i}"] {
       & > * {
         width: calc(100% / #{$i} - #{$iefix});

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,8 +677,7 @@ blockquote > footer {
   margin-top: .75em;
   font-size: 0.9em;
   color: rgba(0, 0, 0, 0.7); }
-
+  blockquote > footer::before {
-blockquote > footer::before {
     content: "\2014 \0020"; }
 
 q {
@@ -685,9 +686,8 @@ q {
 q,
 .q {
   quotes: "“\00a0" "\00a0”"; }
-
+  q:lang(fr),
-q:lang(fr),
+  .q:lang(fr) {
-.q:lang(fr) {
     quotes: "«\00a0" "\00a0»"; }
 
 hr {
@@ -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

@@ -23,7 +23,7 @@ $iefix: 0.01px;
 }
 // Multi-line grid constructor
 // example : .grid-perso { @include grid(12, 3rem); }
-@mixin grid($grid-number:1, $own-gutter:0) {
+@mixin grid($grid-number: 1, $own-gutter: 0) {
   & > * {
     width: calc(100% / #{$grid-number} - #{$iefix});
   }
@@ -71,12 +71,13 @@ $iefix: 0.01px;
 }
 // Constructing grids : will be compiled in CSS
 @media (min-width: ($tiny + 1)) {
-   @for $i from 2 through 12{
+  @for $i from 2 through 12 {
     [class*="grid-#{$i}"] {
-      @include grid(#{$i},0);
+      @include grid(#{$i}, 0);
     }
   }
 }
+
 // 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;
@@ -99,7 +101,7 @@ $iefix: 0.01px;
 }
 // sizing individual children
 @media (min-width: ($tiny + 1)) {
-   @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5"){
+  @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
     .#{$flow} {
       flex: 0 0 auto;
       width: calc(100% / #{$divider} - #{$iefix});
@@ -115,7 +117,7 @@ $iefix: 0.01px;
 // -small-X suffix means "X columns on small-medium screen"
 // example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
 @media (min-width: ($tiny + 1)) and (max-width: $medium) {
-   @for $i from 1 through 4{
+  @for $i from 1 through 4 {
     [class*="-small-#{$i}"] {
       & > * {
         width: calc(100% / #{$i} - #{$iefix});

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,11 +60,13 @@ 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 {
@@ -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;
@@ -107,4 +112,5 @@ input[type="reset"].#{$kna-namespace}unstyled {
       box-shadow: none;
       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;
 }
 
@@ -14,7 +16,7 @@ kbd {
 
 code {
   padding: 2px 4px;
-  background: rgba(0,0,0,0.04);
+  background: rgba(0, 0, 0, 0.04);
   color: #b11;
 }
 
@@ -26,7 +28,7 @@ pre code {
 }
 
 mark {
-  padding:2px 4px;
+  padding: 2px 4px;
 }
 
 sup,
@@ -64,10 +66,10 @@ blockquote > footer {
   margin-top: .75em;
   font-size: 0.9em;
   color: rgba(0, 0, 0, .7);
-}
 
-blockquote > footer::before {
+  &::before {
     content: "\2014 \0020";
+  }
 }
 
 q {
@@ -77,11 +79,10 @@ q {
 q,
 .#{$kna-namespace}q {
   quotes: "“\00a0" "\00a0”";
-}
 
-q:lang(fr),
+  &:lang(fr) {
-.#{$kna-namespace}q:lang(fr) {
     quotes: "«\00a0" "\00a0»";
+  }
 }
 
 hr {

sass/library/_tables.scss

@@ -18,7 +18,7 @@ table,
 
 #recaptcha_table,
 .#{$kna-namespace}table-auto {
-  table-layout:auto;
+  table-layout: auto;
 }
 
 td,

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,10 +30,12 @@
   filter: grayscale(1);
 }
 
-ul.is-unstyled,
+ul {
-ul.unstyled {
+  &.is-unstyled,
+  &.unstyled {
     list-style: none;
     padding-left: 0;
+  }
 }
 
 /* Width Helpers */

sass/utilities/_layout.scss

@@ -83,8 +83,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
 [class*="#{$kna-namespace}flex-container"],
-.#{$kna-namespace}flex-container{
+.#{$kna-namespace}flex-container {
-  display : flex;
+  display: flex;
   flex-wrap: wrap;
 }
 
@@ -103,17 +103,17 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 
 .#{$kna-namespace}flex-item-first,
 .#{$kna-namespace}item-first {
-  order : -1;
+  order: -1;
 }
 
 .#{$kna-namespace}flex-item-medium,
 .#{$kna-namespace}item-medium {
-  order : 0;
+  order: 0;
 }
 
 .#{$kna-namespace}flex-item-last,
 .#{$kna-namespace}item-last {
-  order : 1;
+  order: 1;
 }
 
 .#{$kna-namespace}flex-item-center,

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 {
   }
@@ -237,7 +237,7 @@ img.wp-smiley {
 
   @for $i from 2 through 9 {
     .gallery-columns-#{$i} & {
-			$w: floor(10000/$i)/100;
+      $w: floor(10000 / $i) / 100;
       max-width: unquote($w + '%');
 		}
 	}