From 2f0b29600cca6bbbb49a1cbe40e7226a2d54de32 Mon Sep 17 00:00:00 2001
From: Hugo Giraudel <hugo.giraudel@gmail.com>
Date: Fri, 13 Feb 2015 14:55:20 +0100
Subject: [PATCH] Added a distinction between CSS strings and Sass strings

---
 en/_syntax.md | 45 +++++++++++++++++++++++++++++++++++----------
 en/_toc.md    |  1 +
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/en/_syntax.md b/en/_syntax.md
index 4888e738..c81747e1 100644
--- a/en/_syntax.md
+++ b/en/_syntax.md
@@ -66,32 +66,57 @@ That being said, languages that do not require strings to be quoted are definite
   <div class="code-block__wrapper" data-syntax="scss">
 {% highlight scss %}
 // Yep
-$font-stack: 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif;
+$direction: 'left';
 
 // Nope
-$font-stack: "Helvetica Neue Light", "Helvetica", "Arial", sans-serif;
+$direction: left;
+{% endhighlight %}
+  </div>
+  <div class="code-block__wrapper" data-syntax="sass">
+{% highlight sass %}
+// Yep
+$direction: 'left'
+
+// Nope
+$direction: left
+{% endhighlight %}
+  </div>
+</div>
+
+### Strings as CSS values
+
+Specific CSS values such as `initial` or `sans-serif` require not to be quoted. Indeed, the declaration `font-family: 'sans-serif'` will silently fail because of the single quotes wrapping the value. Because of this, we do not quote those values.
+
+<div class="code-block">
+  <div class="code-block__wrapper" data-syntax="scss">
+{% highlight scss %}
+// Yep
+$font-type: sans-serif;
 
 // Nope
-$font-stack: Helvetica Neue Light, Helvetica, Arial, sans-serif;
+$font-type: 'sans-serif';
+
+// Okay I guess
+$font-type: unquote('sans-serif');
 {% endhighlight %}
   </div>
   <div class="code-block__wrapper" data-syntax="sass">
 {% highlight sass %}
 // Yep
-$font-stack: 'Helvetica Neue Light', 'Helvetica', 'Arial', sans-serif
+$font-type: sans-serif
 
 // Nope
-$font-stack: "Helvetica Neue Light", "Helvetica", "Arial", sans-serif
+$font-type: 'sans-serif'
 
-// Nope
-$font-stack: Helvetica Neue Light, Helvetica, Arial, sans-serif
+// Okay I guess
+$font-type: unquote('sans-serif')
 {% endhighlight %}
   </div>
 </div>
 
-<div class="note">
-  <p>In the previous example, <code>sans-serif</code> is not being quoted because it is a specific CSS value that needs to be unquoted.</p>
-</div>
+Hence, we can make a distinction between strings intended to be used as CSS values like in the previous example, and strings when sticking to the Sass data type, for instance map keys.
+
+We don't quote the former, but we do wrap the latter in single quotes.
 
 ### Strings containing quotes
 
diff --git a/en/_toc.md b/en/_toc.md
index c0881680..fecd8d59 100644
--- a/en/_toc.md
+++ b/en/_toc.md
@@ -13,6 +13,7 @@
     * [Key Principles](#key-principles)
 * [Syntax & Formatting](#syntax-&-formatting)
     * [Strings](#strings)
+        * [Strings as CSS values](#strings-as-css-values)
         * [Strings containing quotes](#strings-containing-quotes)
         * [URLs](#urls)
     * [Numbers](#numbers)