转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://blog.bitsrc.io/4-reasons-to-use-sass-in-your-frontend-project-bce88631c602

SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。

虽然如此，但以上的解释应该不足以向你说清楚SASS是什么，所以下面我将用一些内容来为你解释SASS是什么？它能做什么？

SASS使嵌套/分组CSS选择器和构建样式表变得更加容易

Sass通过在其中嵌套CSS类或选择器并在后台生成CSS使其成为可能。特别是当您遵循BEM体系架构 时特别有用，因为Sass与它的体系结构非常兼容，因此他们在文档中经常提到它。

它是一种更优雅、更酷的UI设计方式。使用Sass构建CSS也更加容易。如果你是一名网页设计师或经验丰富的前端网页开发人员，你可能会非常喜欢它，因为使用它会让你的工作效率直线上升。

Sass还使CSS代码更整洁，因为Sass会自动为您对CSS代码进行分组，并且也同样包含了代码嵌套。
以下这两个功能将帮助您更好地构建CSS：

您可以使用＆符号连接CSS选择器

如果您使用的是BEM体系结构，请使用纯CSS进行编码：

遵循BEM（Block Element Modifier）架构的CSS代码

您可能已经注意到.button 这个类名，多次输入名为button的类名，可能会造成额外的精力浪费，而不是专注于.button有效地对类进行分组和样式设置。我发现做这件事既麻烦又乏味，特别是当我需要在重复命名CSS类或写选择器的时候。

现在如果你用sass来做这件事，它看起来是这样的：

上面的示例展示了SASS如何通过使用（＆）将CSS选择器串联在（{}）中来嵌套几个选择器。如果您使用的是BEM体系结构，那么您就节省了一些需要重复输入CSS类和选择器来遵循该体系结构时间，因为SASS在后台已经帮您生成了完整的CSS了。

比较SASS和CSS这两种语法，它们的代码如下所示：

 左： SASS  右：从SASS编译出的CSS

您可以使用SASS对父子选择器进行分组

Sass的另一个优点是，它还可以帮助您通过几行代码将选择器/类中的父子关系分组，就像您进行选择器连接的方式一样，只是添加了一个与号(&)，您只需多加几个括号就能完成。

在纯CSS中，父子关系如下所示：

Sass是这样处理的：

并排比较，您可以看到这两者有很大区别：

就像选择符连接一样，使用Sass通过将CSS父子关系分组到括号中，自动为您生成CSS的嵌套父子关系。而且显然写出的代码更清爽、简洁。

它可以提高您的工作效率

曾经我对使用Sass持怀疑态度，因为我认为学习CSS的一个子集简直是浪费时间，更不用说我过去经常忽略CSS中引入的最新特性，比如FlexBox。但是，当我第一次尝试学习Sass时，我发现我的开发效率提高了，我在开发/设计我的组件时变得毫不费力！ 我“遇到”它的时间还是太晚了。
对选择器分组并创建嵌套选择器时简直轻而易举，因为Sass自动的帮我们完成了大量的工作。我可以毫不夸张的说我比使用纯CSS设置样式快了2倍。总体的感觉就是“真香”。

您可以使用Mixins将CSS代码段重用到其他选择器

您不仅可以轻松地用更少的代码嵌套CSS选择器，而且可以重用一些代码片段来解决整个UI中的某些CSS问题。

Mixins可以帮助您做到这一点。这样，您可以避免在HTML元素中过多使用非语义的类。

举个例子，您在将UI居中对齐时遇到了问题，而且您不想在每个CSS选择器中都写一遍一模一样的代码。在这种情况下，您可以使用Mixins来解决问题。

下面通过一个示例来展示它的用法吧

在左侧，我们有mixin absCenter，使用@include将它包含在.sidebar选择器中。生成的CSS中就会自动包括mixin的代码段了。

SASS会立即把mixin标识的部分识别为可重用的代码，并将其注入到声明需要引用它们的选择器/类中。

您可以使用Function指令定义复杂操作

您不仅可以通过使用Mixin重用代码，还可以为复杂的计算定义自己的函数！函数使您可以灵活地执行以下操作。

如果您有一些复杂的CSS，您可能想要自动化并减少冗余，您可以利用自定义函数的强大功能来实现这一点。

让我们继续为您演示一下：

结论

作为相对资深的前端开发者，我觉得如果您还没有用过Sass，那么建议您快用起来，因为它可能是您工作流程中的重要补充。如果您希望开始学习，可以通过该文档来开始学习。