字符串

無論你是否相信，字符串在 CSS 和 SCSS 中都占有重要地位。大多數(shù)的 CSS 值不是數(shù)值就是字符串，所以遵循固定的編程規(guī)范處理 Sass 中的字符串是非常重要的一項工作。

編碼

為了避免潛在的字符編碼問題，強(qiáng)力建議在入口文件中通過?@charset?指令使用UTF-8?編碼格式。請確保該指令是文件的第一條語句，并排除其他字符編碼聲明。

@charset 'utf-8';

引用

CSS 中不要求字符串必須用引號包裹，甚至是字符串中包含空格的。就拿font-family屬性來說：無論你是否使用引號包裹，CSS 解析器都可以正確解析。

因此，Sass?也不強(qiáng)制要求字符串必須被引號包裹。更棒的是（你也會如此認(rèn)為），被引號包裹和沒被包裹的一對字符串完全等同（例如，'abc'?嚴(yán)格等同于?abc）。

話雖如此，不強(qiáng)制要求字符串被引號包裹的畢竟是少數(shù)，所以，在 Sass 中字符串應(yīng)該始終被單引號(')所包裹（在?querty?鍵盤中單引號比雙引號更容易輸入）。即使不考慮與其他語言的一致性，單是考慮 CSS 的近親 JavaScript，也有數(shù)條理由這么做：

• 如果顏色名不被引號包裹，將會被解析為顏色值，顯然這會導(dǎo)致嚴(yán)重問題；
• 大多數(shù)的語法高亮機(jī)制將會因未被引號包裹的字符串而罷工；
• 提高可讀性；
• 沒有正當(dāng)理由不去用引號包裹字符串。

// Yep
$direction: 'left';

// Nope
$direction: left;

作為 CSS 的值

CSS 中類似?initial?或?sans-serif?的專用名詞無須引用起來。事實上，font-family: 'sans-serif'?該聲明是錯誤的，因為 CSS 希望獲得的是一個標(biāo)識符，而不是一個字符串。因此，我們無須引用這些值。

// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');

就像上例這樣，我們就可以區(qū)別用于 CSS 值的字符串（CSS 標(biāo)識符）和 Sass 的字符串類型了（比如 map 的值）。

我們沒有引用前者，但卻使用單引號包裹了它。

包含引號的字符串

如果字符串內(nèi)包含了一個或多個單引號，一種解決方案就是使用雙引號包裹整個字符串，從而避免使用過多的轉(zhuǎn)義字符。

// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";

URLS

URL 最好也用引號包裹起來，原因和上面所描述一樣：

// Yep
.foo {
  background-image: url('/images/kittens.jpg');
}

// Nope
.foo {
  background-image: url(/images/kittens.jpg);
}

擴(kuò)展閱讀

• All You Ever Need to Know About Sass Interpolation
• SassyStrings