拥抱Sass（为什么应该停止使用Vanilla CSS）

本文概述

为什么仍要使用Sass？
还有更多吗？
总结

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

文章图片
一次拥抱Sass, 你可能再也不想回到原始CSS了
鸣叫
直到最近, 当我不得不在项目中切换回原始CSS时, 我才意识到与Sass一起工作有多快乐。在那段时间里, 我学到了很多东西, 以至于我决定赞美Sass, 使这个世界更美好, 让你更快乐！
为什么仍要使用Sass？组织：@import
我刚刚提到的这个项目, 一个大型的电子商务网站, 具有一个CSS文件, 其中包含7184行未压缩的样式声明。是的, 你没看错：七千一百八十四行CSS。我确信这不是业内最大的CSS文件前端开发人员, 但是它足够大, 可以完全解决。
这是你需要Sass的第一个原因：它可以帮助你组织和模块化样式表。它不是变量, 也不是嵌套。对我而言, Sass的主要功能是局部函数, 以及它如何扩展CSS @import规则以允许其导入SCSS和Sass文件。实际上, 这意味着你将能够将巨大的style.css文件拆分为几个较小的文件, 这些文件将更易于维护, 理解和组织。

文章图片
Sass帮助你组织和模块化样式表
鸣叫
@import规则的存在时间与CSS差不多。但是, 它臭名昭著, 因为当你在CSS文件中使用@import时, 会触发单独的HTTP请求, 每个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（为什么应该停止使用Vanilla CSS）】以” $” 开头的单词是Sass变量。这意味着在样式表的后面, 你将能够使用这些单词, 并将它们映射到你之前定义的值：

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

想象一下, 这如何改变我们的7184行CSS代码, 你可能现在就开始渴望Sass。更好的是, 假设对品牌进行了重新设计, 你需要更新CSS中的所有颜色。使用Sass, 你唯一需要做的就是一次更新这些变量的声明, 然后加油！所做的更改将围绕你的样式表。
我在Sass游乐场Sassmeister中编码了此示例。因此, 继续尝试将这些变量更改为其他变量。
变量的用途不仅限于颜色, 还包括字体声明, 大小, 媒体查询等。这是一个非常基本的示例, 可以给你一个想法, 但是请相信我, Sass的可能性是无限的。
Sass的无限可能
鸣叫
清洁程序源代码：嵌套
嵌套可能是Sass提到的第二个功能。当我使用Sass后回到普通CSS时, 我正在查看的CSS文件似乎太混乱了, 我不确定它是否缩小了。没有嵌套, 原始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, 你可以进行参数化的CSS声明, 并在样式表中重复使用它们。

文章图片
用Sass保持干燥
鸣叫
例如, 假设你有一个带有按钮的盒子模块。你希望框的边框和按钮的背景具有相同的颜色。使用香草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); }

看起来很美吧？玩这个例子。你可以创建自己的mixins库, 甚至更好的是, 可以使用其中的一个社区库。
扩展类似, 它们使你可以将属性从一个选择器共享到另一个选择器。但是, 它们不输出多个声明, 而是输出一个类列表, 而不重复你的属性。这样, 你也可以避免输出中重复代码。让我们忘记上一个示例中的按钮, 看看@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” , 这与事实不相上下。
总结转到并访问安装页面并开始黑客攻击！相信我, 你不会后悔的。
是的, Sass有一些替代品。其他预处理器(LESS, Stylus), 后处理器, Grunt等。甚至还有CSS变量。我并不是说Sass是唯一的技术。我只是说这是最好的！至少现在(是。不相信我在说什么？继续尝试一下。你不会后悔的！
相关：*探索SMACSS：CSS的可扩展和模块化架构*