使用 SASS 创建语义化 HTML

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

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

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

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 变得更加灵活和抽象。

全部栏目

使用 SASS 创建语义化 HTML