字符串

2018-02-24 15:11 更新

无论你是否相信,字符串在 CSS 和 SCSS 中都占有重要地位。大多数的 CSS 值不是数值就是字符串,所以遵循固定的编程规范处理 Sass 中的字符串是非常重要的一项工作。

编码

为了避免潜在的字符编码问题,强力建议在入口文件中通过 @charset 指令使用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);
}

扩展阅读

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号