無論你是否相信，字符串在 CSS 和 SCSS 中都占有重要地位。大多數的 CSS 值不是數值就是字符串，所以遵循固定的編程規范處理 Sass 中的字符串是非常重要的一項工作。 ## 編碼 為了避免潛在的字符編碼問題，強力建議在[入口文件](http://sass-guidelin.es/zh/?utm_source=tuicool#入口文件)中通過?`@charset`?指令使用[UTF-8](http://en.wikipedia.org/wiki/UTF-8)?編碼格式。請確保該指令是文件的第一條語句，并排除其他字符編碼聲明。 ~~~ @charset 'utf-8'; ~~~ ## 引用 CSS 中不要求字符串必須用引號包裹，甚至是字符串中包含空格的。就拿`font-family`屬性來說：無論你是否使用引號包裹，CSS 解析器都可以正確解析。 因此，Sass?**也不**強制要求字符串必須被引號包裹。更棒的是（你也會如此認為），被引號包裹和沒被包裹的一對字符串完全等同（例如，`'abc'`?嚴格等同于?`abc`）。 話雖如此，不強制要求字符串被引號包裹的畢竟是少數，所以，在 Sass 中**字符串應該始終被單引號(`'`)所包裹**（在?**querty**?鍵盤中單引號比雙引號更容易輸入）。即使不考慮與其他語言的一致性，單是考慮 CSS 的近親 JavaScript，也有數條理由這么做： * 如果顏色名不被引號包裹，將會被解析為顏色值，顯然這會導致嚴重問題； * 大多數的語法高亮機制將會因未被引號包裹的字符串而罷工； * 提高可讀性； * 沒有正當理由不去用引號包裹字符串。 ~~~ // Yep $direction: 'left'; // Nope $direction: left; ~~~ ## 作為 CSS 的值 CSS 中類似?`initial`?或?`sans-serif`?的專用名詞無須引用起來。事實上，`font-family: 'sans-serif'`?該聲明是錯誤的，因為 CSS 希望獲得的是一個標識符，而不是一個字符串。因此，我們無須引用這些值。 ~~~ // Yep $font-type: sans-serif; // Nope $font-type: 'sans-serif'; // Okay I guess $font-type: unquote('sans-serif'); ~~~ 就像上例這樣，我們就可以區別用于 CSS 值的字符串（CSS 標識符）和 Sass 的字符串類型了（比如 map 的值）。 我們沒有引用前者，但卻使用單引號包裹了它。 ## 包含引號的字符串 如果字符串內包含了一個或多個單引號，一種解決方案就是使用雙引號包裹整個字符串，從而避免使用過多的轉義字符。 ~~~ // 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); } ~~~ ## 擴展閱讀 * [All You Ever Need to Know About Sass Interpolation](http://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375) * [SassyStrings](https://github.com/HugoGiraudel/SassyStrings)