Page 45 - css揭秘

现在，我们只需要在一处修改，就可以改变所有的 background-size
和 background-repeat 了。你会发现这个技巧在本书中的使用非常普遍。

我应该使用预处理器吗

你很可能听说过像 Stylus（http://stylus-lang.com/）、Sass（http://sass-
lang.com/）或 LESS（http://lesscss.org/）这样的 CSS 预处理器。它们为 CSS

的编写提供提供了一些便利，比如变量、mixin、函数、规则嵌套、颜色处
理等。

如果使用得当，它们在大型项目中可以让代码更加灵活，而 CSS 自身
在这方面确实有很大局限。只要我们在代码健壮性、灵活性和 DRY 方面
有追求，就会感受到 CSS 在这方面的局限。不过，预处理器也不是完美无
缺的。
„ CSS 的文件体积和复杂度可能会失控。即使是简洁明了的源代码，
在经过编译之后也可能会变成一头从天而降的巨兽。
„ 调试难度会增加，因为你在开发工具中看到的 CSS 代码并不是你写
的源代码。不过这个问题已经大大好转了，因为已经有越来越多的
调试工具开始支持 SourceMap。SourceMap 是一种非常酷的新技术，
正是为了解决这个痛点而生的，它会告诉浏览器哪些编译生成的
CSS 代码对应哪些预处理器 CSS 代码，精确到行号。
„ 预处理器在开发过程中引入了一定程度的延时。尽管它们通常很快，
但仍然需要差不多一秒钟的时间来把你的源代码编译成 CSS，而你
不得不等待这段时间才能预览到代码的效果。

小 花 絮 怪异的简写语法

你可能已经注意到前面那个背景属性简写的例子了：在 background 简写属性中指定 background-size
时，需要同时提供一个 background-position 值（哪怕它的值就是其初始值也需要写出来），而且还要使
用一个斜杠（/）作为分隔。为什么有些简写的语法如此怪异？
这通常都是为了消除歧义。在这个例子中，top right 显然是 background-position，而 2em 2em 是
background-size，不管它们的顺序如何。但是，请设想一下 50% 50% 这样的值，它到底是 background-
size 还是 background-position 呢？当你在使用展开式属性时，CSS 解析器明白你的意图；而当你使用
简写属性时，解析器需要在没有属性名提示的情况下弄清楚 50% 50% 到底指什么。这就是需要引入斜杠的
原因。
对绝大多数的简写属性来说，并没有这样的歧义问题，因而简写属性的多个值往往可以随意排列。不
过，我还是建议你养成随手查阅语法的好习惯，以免犯错。如果你对正则表达式以及规范的语法描述方式
（grammar）很熟悉的话，不妨直接在相关规范中查询语法描述。如果要确定某个属性的值是否有明确的
顺序要求，这可能是最快的方式。

14 第 1 章 引言

඀ࠡ JOEC