无论你是否相信，字符串在 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)