使用SASS创建语义化HTML_html/css

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