1 min read

Sass

现在为止,我还坚持一个看法,就是,如果我们对 CSS 模块化、架构等没有一个全局把握,那么,任何 CSS 预处理器,不管它是 LESS,还是 Sass 或者 Stylus,带来的好处只会小于它们带来的坏处。

但我终于想写一篇关于 Sass 的内容。一来是上一篇写 Compass 与 CSS 贴图定位时其实已经用到 Sass,二来自身对 CSS 架构有些了解,夸张地说,就是想试一下身手。

CSS 类命名

还是先来聊一下 CSS 类命名。

页面上有一 A 块,它的 margin-top 值为20px,从类的可复用性出发,我们可能这样给它命名:

.mt-20 {
    margin-top:20px;
}

在 HTML 代码中应用到 A 块则是如下:

<p id="A" class="mt-20"></p>

假如 B、C、D 也一样的 margin-top 值,那么我们的 HTML 代码会出现如下:

<p id="B" class="mt-20"></p>
<p id="C" class="mt-20"></p>
<p id="D" class="mt-20"></p>

一旦数值20发生变化,比如说要微调成21,那么,上面的代码中,我们要改 CSS 文件中2处、HTML 文件中4处。显然,情况糟透了。

以前,我曾尝试过上述命名方法,并且见到有人鼓励这样的命名方式,但随后就发现问题不少。那么,怎样的命名方式会更合理?

从 font-size 的可能取值里我们可以得到启发:

font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large

是的,我们的 .mt-20 可以考虑命名成 .mt-large,这样我们就脱离了具体的数值,也让 CSS 类名更有语义。bootstrap 的网格系统命名则是 .col-xs-、.col-sm-、.col-md-、.col-lg- 这样。更进一步缩减代码。Yahoo 走得更远,它的 CSS 里是这样写的:

.mt-l {
    margin-top: 20px;
}
.mr-l {
    margin-right: 20px;
}
.mb-l {
    margin-bottom: 20px;
}
.ml-l {
    margin-left: 20px;
}

这也是我现在采用的命名。(Yahoo 的页面里,其实有很多 oocss 的影子,上面的命名只不过是一个体现。)

在拟定上述的命名方法后,再来说 Sass 在其中的应用。

Sass 变量

在上面代码中,我们定义 large 值为20px,假如后期需要微调,比如降成19px,这下我们又要修改起码4处的值,对的,我们又在干重复的事情。代码一旦出现重复,就会容易出错。Sass 可以解决这个问题。

在 .scss 文件中,我们事先定义一个 $large 变量,然后在定义类时使用该变量:

$large: 20px;

.mt-l{margin-top: $large;}
.mr-l{margin-right: $large;}
.mb-l{margin-bottom: $large;}
.ml-l{margin-left: $large;}

这样,后期 large 值出现变化,我们也只要修改一处。

扩展阅读

  1. OOCSS + Sass = The best way to CSS
报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo