diff --git a/en/_mixins.md b/en/_mixins.md index ed7754f6..e7822789 100644 --- 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 %} @@ -246,14 +246,14 @@ Then using this mixin should be very straightforward:
{% highlight scss %} .foo { - @include prefix(transform, rotate(90deg), webkit ms); + @include prefix(transform, rotate(90deg), ('webkit', 'ms')); } {% endhighlight %}
{% highlight sass %} .foo - +prefix(transform, rotate(90deg), webkit ms) + +prefix(transform, rotate(90deg), ('webkit', 'ms')) {% endhighlight %}
diff --git a/en/_naming.md b/en/_naming.md index 59492389..5bcce3a9 100644 --- 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
{% 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 %}
{% 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 %}
diff --git a/en/_syntax.md b/en/_syntax.md index c81747e1..3b8dbaf1 100644 --- 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.
{% 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,);
{% 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 %}
@@ -677,7 +680,7 @@ When adding new items to a list, always use the provided API. Do not attempt to
{% 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;
{% highlight sass %} -$shadows: 0 42px 13.37px hotpink +$shadows: (0 42px 13.37px hotpink); // Yep $shadows: append($shadows, $shadow, comma)