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

編碼

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

@charset 'utf-8';

引用

CSS 中不要求字符串必須用引號(hào)包裹，甚至是字符串中包含空格的。就拿font-family屬性來(lái)說(shuō)：無(wú)論你是否使用引號(hào)包裹，CSS 解析器都可以正確解析。

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

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

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

// Yep
$direction: 'left';

// Nope
$direction: left;

作為 CSS 的值

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

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

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

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

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

我們沒(méi)有引用前者，但卻使用單引號(hào)包裹了它。

包含引號(hào)的字符串

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

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

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

URLS

URL 最好也用引號(hào)包裹起來(lái)，原因和上面所描述一樣：

// 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