您知道SASS吗?

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

原文出处: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,那么建议您快用起来,因为它可能是您工作流程中的重要补充。如果您希望开始学习,可以通过该文档来开始学习。