Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added a distinction between CSS strings and Sass strings
Browse files Browse the repository at this point in the history
KittyGiraudel committed Feb 14, 2015

Verified

This commit was signed with the committer’s verified signature. The key has expired.
renovate-bot Mend Renovate
1 parent df9aac3 commit 2f0b296
Showing 2 changed files with 36 additions and 10 deletions.
45 changes: 35 additions & 10 deletions en/_syntax.md
Original file line number Diff line number Diff line change
@@ -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

1 change: 1 addition & 0 deletions en/_toc.md
Original file line number Diff line number Diff line change
@@ -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)

0 comments on commit 2f0b296

Please sign in to comment.