Reworked the rules for Sass lists

KittyGiraudel · Feb 14, 2015 · 8af9352 · 8af9352
1 parent 2f0b296
commit 8af9352
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/en/_mixins.md b/en/_mixins.md
@@ -123,18 +123,18 @@ Sass is actually pretty clever with mixins and function declarations, so much so
 @include dummy(true, 42, 'kittens');
 
 // Yep but nope
-$params: true, 42, 'kittens';
+$params: (true, 42, 'kittens');
 $value: dummy(nth($params, 1), nth($params, 2), nth($params, 3));
 
 // Yep
-$params: true, 42, 'kittens';
+$params: (true, 42, 'kittens');
 @include dummy($params...);
 
 // Yep
 $params: (
   'c': 'kittens',
   'a': true,
-  'b': 42
+  'b': 42,
 );
 @include dummy($params...);
 {% endhighlight %}
@@ -148,15 +148,15 @@ $params: (
 +dummy(true, 42, 'kittens')
 
 // Yep but nope
-$params: true, 42, 'kittens'
+$params: (true, 42, 'kittens')
 $value: dummy(nth($params, 1), nth($params, 2), nth($params, 3))
 
 // Yep
-$params: true, 42, 'kittens'
+$params: (true, 42, 'kittens')
 +dummy($params...)
 
 // Yep
-$params: ( 'c': 'kittens', 'a': true, 'b': 42, )
+$params: ('c': 'kittens', 'a': true, 'b': 42,)
 +dummy($params...)
 {% endhighlight %}
   </div>
@@ -246,14 +246,14 @@ Then using this mixin should be very straightforward:
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}
 .foo {
-  @include prefix(transform, rotate(90deg), webkit ms);
+  @include prefix(transform, rotate(90deg), ('webkit', 'ms'));
 }
 {% endhighlight %}
   </div>
   <div class="code-block__wrapper" data-syntax="sass">
 {% highlight sass %}
 .foo
-  +prefix(transform, rotate(90deg), webkit ms)
+  +prefix(transform, rotate(90deg), ('webkit', 'ms'))
 {% endhighlight %}
   </div>
 </div>

diff --git a/en/_naming.md b/en/_naming.md
@@ -61,19 +61,19 @@ As for many languages, I suggest all-caps snakerized variables when they are con
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}
 // Yep
-$CSS_POSITIONS: top, right, bottom, left, center;
+$CSS_POSITIONS: (top, right, bottom, left, center);
 
 // Nope
-$css-positions: top, right, bottom, left, center;
+$css-positions: (top, right, bottom, left, center);
 {% endhighlight %}
   </div>
   <div class="code-block__wrapper" data-syntax="sass">
 {% highlight sass %}
 // Yep
-$CSS_POSITIONS: top, right, bottom, left, center
+$CSS_POSITIONS: (top, right, bottom, left, center)
 
 // Nope
-$css-positions: top, right, bottom, left, center
+$css-positions: (top, right, bottom, left, center)
 {% endhighlight %}
   </div>
 </div>

diff --git a/en/_syntax.md b/en/_syntax.md
@@ -622,28 +622,30 @@ Lists are the Sass equivalent of arrays. A list is a flat data structure (unlike
 
 Lists should respect the following guidelines:
 
-* unless it is too long to fit on an 80-character line, always display it on a single line;
-* unless it is used as is for CSS purposes, always use comma as a delimiter;
-* unless it is empty or nested within another list, never write the parenthesis;
-* never add a trailing comma.
+* either inlined or multilines;
+* necessarily on multilines if too long to fit on an 80-character line;
+* unless used as is for CSS purposes, always comma separated;
+* always wrapped in parenthesis;
+* trailing comma if multilines, not if inlined.
 
 <div class="code-block">
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}
 // Yep
-$font-stack: 'Helvetica', 'Arial', sans-serif;
+$font-stack: ('Helvetica', 'Arial', sans-serif);
 
-// Nope
-$font-stack:
+// Yep
+$font-stack: (
   'Helvetica',
   'Arial',
-  sans-serif;
+  sans-serif,
+);
 
 // Nope
 $font-stack: 'Helvetica' 'Arial' sans-serif;
 
 // Nope
-$font-stack: ('Helvetica', 'Arial', sans-serif);
+$font-stack: 'Helvetica', 'Arial', sans-serif;
 
 // Nope
 $font-stack: ('Helvetica', 'Arial', sans-serif,);
@@ -652,22 +654,23 @@ $font-stack: ('Helvetica', 'Arial', sans-serif,);
   <div class="code-block__wrapper" data-syntax="sass">
 {% highlight sass %}
 // Yep
-$font-stack: 'Helvetica', 'Arial', sans-serif
+$font-stack: ('Helvetica', 'Arial', sans-serif)
 
-// Nope (since it is not supported)
-$font-stack:
+// Nope (not supported)
+$font-stack: (
   'Helvetica',
   'Arial',
-  sans-serif
+  sans-serif,
+)
 
 // Nope
-$font-stack: 'Helvetica' 'Arial' sans-serif
+$font-stack: 'Helvetica' 'Arial' sans-serif;
 
 // Nope
-$font-stack: ('Helvetica', 'Arial', sans-serif)
+$font-stack: 'Helvetica', 'Arial', sans-serif;
 
 // Nope
-$font-stack: ('Helvetica', 'Arial', sans-serif,)
+$font-stack: ('Helvetica', 'Arial', sans-serif,);
 {% endhighlight %}
   </div>
 </div>
@@ -677,7 +680,7 @@ When adding new items to a list, always use the provided API. Do not attempt to
 <div class="code-block">
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}
-$shadows: 0 42px 13.37px hotpink;
+$shadows: (0 42px 13.37px hotpink);
 
 // Yep
 $shadows: append($shadows, $shadow, comma);
@@ -688,7 +691,7 @@ $shadows: $shadows, $shadow;
   </div>
   <div class="code-block__wrapper" data-syntax="sass">
 {% highlight sass %}
-$shadows: 0 42px 13.37px hotpink
+$shadows: (0 42px 13.37px hotpink);
 
 // Yep
 $shadows: append($shadows, $shadow, comma)