使用 SASS 创建语义化 HTML

告诉大家一个秘密, 自从有了 SASS 之后, 我们可以有两种方式来使用 css,
我管它们叫做 类库式 和 框架式 。

这里我以 foundation 这个 scss 框架为例, 它和我们熟悉的 bootstrap 类似,
只不过 bootstrap 使用 less 写的 (bootstrap 3 也改为 SASS 了, foundation 是由 sass 写的。
foundation 是一个对 developer 友好的前端框架, 如果说 bootstrap 是一个 ui 库的话, foundation 更偏重于成为一个工具。

如果你对 foundation 不熟的话, 首先看一个这个例子。

你会发现它的用法和 bootstrap 非常类似, 这就是我刚才所说的 框架式 用法。
这种用法只要是接触过 bootstrap 的同学都不会陌生。它的核心就是 ui 驱动, 你需要这个元素成为什么样子,
你就把框架提供的 class 的名字赋值给这个元素。 这就是一般框架的做法, 比如说 rails，我提供一套规范,
然后你的模型想要能绑定数据库, 那你就继承 activerecord 类, 你的 controller 要想接收 http 请求,
就要继承 application_controller。 然后 model 放 model 文件夹下, controller 放 controller 文件夹下。
这就和很多 css 框架提供的 grid （网格） 类似, 每个元素都必须处于一个 column 之内, 而 column 需要被 row 所包围。

其实还有另外一种用法, 就是 类库式, 类库和框架的区别, 其实一句话就能说明白了。

Frameworks drive you, you drive libs。

foundation 的官方文档里, 很多组件都有 Semantic Markup With Sass 这一节。
那什么是 semantic markup 呢? 简单来说就是你的 markup 要语义化。
在 框架式 的用法中, 博客的边栏被赋予了一个叫做 col-4 的 class, 这就不是语义化的。
因为 col-4 表达的是外观的信息, 表示这个元素占用的宽度是4。 这就不是语义化的。
markup 应该表示的是元素的功能, 而不是外观。
而使用 sass 的 mixin, 就可以实现语义化。 比如你有一个按钮, class 命名为 fire。
然后你需要加载 foundation 的一个圆边的按钮样式, 使用框架式的用法那就只能给这个元素再加上
button radius 这两个 class 命名。 而使用 类库式 那就能这样写:

.fire {
    @include button
}

这两种写法最终生成的 css 当然是有所不同的, 这个后面来讲, 不过至少它们所展现出来的样式是一致的。
在 html 结构上来说, 类库式 更为简洁。

上面的那个例子中，使用 类库式 的代码如下：

@import '../../bower_components/foundation/scss/foundation/components/grid';

.main {
    @include grid-row();
}

.brother {
    @include grid-column(6);
}

点击查看结果

搞了半天, 这两种写法的区别就是在 markup 上稍微减少了几个字符而已。
事实不是这么简单的。 重点并不是少写几个单词, 重点是 html 的结构变得更稳定了。

现在的 html 结构就变得更加抽象，而把底层实现更多的交给 css。

这多亏了 scss 的强大，使得 css 变得更加灵活和抽象。