拥抱 Sass：为什么你应该停止使用 Vanilla CSS

当我第一次听说 Sass 和其他 CSS 预处理器时，我的确切想法并不是很热情。 “为什么我们需要另一个工具来处理已经像 CSS 一样漂亮的东西？”。 “我不会用那个”。 “我的 CSS 已经足够有序，不需要它”。 “预处理器适用于不知道如何编写 CSS 的人，如果您知道如何编写 CSS，则不需要预处理器”。 “毕竟，处理器是为不知道如何编写 CSS 的人准备的。 如果他们这样做了，他们就不需要预处理器了”。 我实际上避开了它们一段时间，直到我被迫在几个项目中使用它。

直到最近，当我不得不在一个项目中切换回 vanilla CSS 时，我才意识到我有多喜欢使用 Sass。 在那段时间里，我学到了很多，我决定赞美萨斯，让这个世界变得更美好，让你成为一个更快乐的人！

为什么仍然使用 Sass？

组织：@import

我刚才提到的这个项目，一个大型电子商务网站，只有一个 CSS 文件，其中包含 7184 行未压缩的样式声明。 是的，你没看错：七千一百八十四行 CSS。 我确信这不是业界前端开发人员必须处理的最大的 CSS 文件，但它足够大，可以完全一团糟。

这是您需要 Sass 的第一个原因：它可以帮助您组织和模块化您的样式表。 它不是变量，也不是嵌套。 对我来说，Sass 的关键特性是部分以及它如何扩展 CSS @import 规则以允许它导入 SCSS 和 Sass 文件。 在实践中，这意味着您将能够将巨大的 style.css 文件拆分为几个更易于维护、理解和组织的较小文件。

@import 规则几乎与 CSS 本身一样长。 然而，它却名声不佳，因为当您在 CSS 文件中使用 @import 时，您会触发单独的 HTTP 请求，每个要导入的 CSS 文件都有一个请求。 这可能会损害您网站的性能。 那么你在 Sass 中使用它会发生什么？ 如果您从未停下来思考“预处理器”一词的含义，那么现在是时候了。

预处理器是一个程序，它处理其输入数据以产生用作另一个程序输入的输出。 ——维基百科

所以，回到我们的 @import 规则，这意味着 @import 将由 Sass 处理，我们所有的 CSS 和 SCSS 文件将被编译成一个文件，最终将出现在我们的实时站点中。 用户只需提出一个请求并下载一个文件，而您的项目结构可以由数百个模块化文件组成。 这就是典型 Sass 项目的 style.scss 的样子：

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

不要重复自己：变量

任何赞美 Sass 的文章都可能首先提到它的明星特性——变量。 变量最常见的用途是调色板。 有多少次你发现几个应该是相同颜色的声明，因为没有人使用相同的十六进制代码，最终在 CSS 中显示为略有不同的阴影？ 萨斯来救援。 在 Sass 中，您可以声明几乎任何值的变量。 所以，我们的调色板可以是这样的：

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

以“$”开头的单词是 Sass 变量。 这意味着稍后在您的样式表中，您将能够使用这些词，并且它们将被映射到您之前定义的值：

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

想象一下这将如何改变我们的 7184 行 CSS 代码，你可能现在就开始渴望 Sass。 更好的是，想象一下品牌重新设计，您需要更新 CSS 中的所有颜色。 使用 Sass，您唯一需要做的就是更新这些变量的声明一次，然后 baam！ 更改将围绕您的样式表进行。

我在 Sass 游乐场 Sassmeister 中编写了这个示例。 所以继续尝试将这些变量更改为其他变量。

变量的用处不仅限于颜色，还包括字体声明、大小、媒体查询等等。 这是一个非常基本的例子，可以给你一个想法，但相信我，Sass 的可能性是无穷无尽的。

更干净的源代码：嵌套

嵌套可能是 Sass 中被提及次数第二多的特性。 当我在使用 Sass 后回到 vanilla CSS 时，我正在查看的 CSS 文件看起来非常混乱，以至于我不确定它是否被缩小了。 没有嵌套，vanilla CSS 看起来并不比漂亮打印的 .min.css文件更好：

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

使用嵌套，您可以在声明的大括号之间添加类。 Sass 将非常直观地编译和处理选择器。 您甚至可以使用“&”字符来获取父选择器的引用。 回到我们的示例 CSS，我们可以将其转换为：

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

它看起来很漂亮，更容易阅读。 随意玩这个例子。

再次！ 不要重复自己：混合和扩展

CSS 中的重复总是难以避免。 再强调一点也没有什么坏处，尤其是当 Sass 为您提供 mixins 和扩展时。 它们都是强大的功能，有助于避免大量重复。 mixins 和extends 的可能性似乎没有尽头。 使用 mixins，您可以进行参数化 CSS 声明并在整个样式表中重用它们。

例如，假设您有一个盒子模块，里面有一个按钮。 您希望框的边框和按钮的背景颜色相同。 使用 vanilla CSS，您可以执行以下操作：

 .box { border: 2px solid red; } .box .button { background: red; }

假设您现在想要相同的盒子模块，但颜色不同。 您将在 CSS 中添加如下内容：

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

现在，假设您想要一个盒子模块，但边框更薄。 你会添加：

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

很多重复，对吧？ 使用 Sass，您可以抽象出这些案例以减少重复。 你可以像这样定义一个mixin：

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

因此，您的源代码可以简化为：

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

看起来很漂亮，对吧？ 玩这个例子。 您可以创建自己的 mixin 库，或者更好的是，您可以使用其中一个社区库。

扩展是类似的，它们让您可以将属性从一个选择器共享到另一个选择器。 但是，它们不是输出多个声明，而是输出一个类列表而不重复您的属性。 这样，您也可以避免在输出中重复代码。 让我们忘记前面示例中的按钮，看看@extend 如何与 .boxes一起工作。

假设您声明了第一个框：

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

现在您需要两个与此类似的框，但边框颜色不同。 您可以执行以下操作：

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

这是编译后的 CSS 的样子：

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

很强大，对吧？ 您可以在此处找到示例。 如果您查看生成的 CSS，您会发现.box类已包含在输出中。 如果您不想要这种行为，您可以将@extend与“占位符”结合使用。 占位符是一种特殊的选择器，不会在 CSS 中输出类。 例如，我有时会发现自己经常重置列表的默认样式。 我通常将@extend 与这样的占位符一起使用：

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

然后，您可以在所有样式表中重用此模式：

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

您编译的 CSS 将如下所示：

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

在此处查看示例。

还有更多吗？

绝对地！ 我不想让这篇文章过于复杂，但是有一个Sassy的世界等着你去发现； 除此之外还有很多功能：操作、带有 // 的单行注释、函数、if 循环……如果你曾经想过“用 CSS 做一些 'X' 的事情会很棒”，我敢肯定那个东西'X'已经由Sass完成了。 “CSS with superpowers”是它的标语，这再贴切不过了。

结论

去访问安装页面并开始黑客攻击！ 相信我，你不会后悔的。

是的，有一些 Sass 的替代品。 其他预处理器（LESS、Stylus）、后处理器、Grunt 等。甚至还有 CSS 变量。 我并不是说 Sass 是唯一的技术。 我只想说这是最好的！ 至少现在。 不相信我说的话？ 来吧，自己尝试一下。 你不会后悔的！