综合开发

您知道SASS吗?

微信扫一扫,分享到朋友圈

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

男子在推特发布舔沃尔玛商品的视频 因“制造恐怖威胁”被捕

上一篇

Streamz: Python pipelines to manage continuous streams of data

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

您知道SASS吗?

长按储存图像,分享给朋友