为什么要开始学习Sass

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

本文不会像一些其它文章一样,教你如何开始使用Sass,我会告诉你为什么使用Sass,我到底喜欢它什么。

我最初是在一个Laravel项目中,接触了Sass,Larvel是个PHP框架,内建有Elixir服务支持Sass。你可能觉得说这个玩意跟我们没啥关系,但是重点是Larvel支持Sass,使Sass非常容易上手,这就促使我去尝试使用Sass,慢慢了解到它的很多优点。

之前,我总觉得,写脚本在CSS里会把本应简单的事情变复杂,然后不确定是否应该花时间去学习它。但是我慢慢发现,它的好处很多,还好当初没有放弃。

Sass 就是 CSS

首先,你要知道的是,Sass其实就是CSS,这里可能会有很多的议论,但是如果你并不想使用Sass的诸多特性,你也可以只在Sass的样式表中书写CSS,这一点问题都没有,然后当你需要一些Sass特性的时候,你可以拿起来写。

Import(引入)

回到当初的Larvel项目,一开始我用传统的方式书写CSS文件,最后发现文件内容非常的长。当时觉得,这没有什么问题,但是过了一段时间之后,发现在这个CSS文件里我很难回想起各个规则的位置。ok,Sass来了,它允许你创建多个文件,然后在一个文件中引入。也就是说你可以把长长的CSS文件,分割成几个以各自逻辑命名,组织的文件。这样,以后我们要完善更改样式表就变得更容易了。

对我来说,在一个项目中,经常会为网格,颜色,基础的布局创建文件,等等。当然,只要你愿意,也可以引入很多个需要的文件。

Variables(变量)

如果你编过程序,变量对你而言并不会陌生。你可以定义一个变量,赋值,然后就能复用它。这是一个非常有用的特性,因为在书写CSS的颜色属性时候,不需要再去重复写多个一样的hexrgb值,你可以把它写在一个变量里。

这样做的好处就是,当你的客户想把红色设置稍微粉一点,你只需在变量定义的地方修改颜色的值。 另外一个好处就是,相比hex值,变量名更好记,这就减少了前后不一致的错误。

Nesting(嵌套)

如果做响应式设计,我猜你会在CSS中的一些地方用到媒体查询。我曾经很发愁,媒体查询到底应该在CSS文件中的什么位置,最后我选择放在样式表的最底部,为不同的屏幕宽度,单独拿出一块区域。这么做的问题是,这些样式规则和原始的规则是分离的,维护起来会比较困难。

Sass的嵌套特性允许你可以通过在class中放置媒体查询来为这个class书写媒体查询。

这就表明,可以把一个class的所有规则,包括媒体查询放在一个地方,这样阅读和维护都会变得更加容易,就不用反复地上下查看这个文件了。

像媒体查询一样,也可以使用&添加,如hover,active这样的状态规则。

Extend(继承)

Sass有很多其它很酷的东西,但是我只在这里多说一个。当存在两个class,它们有一些不同,但是也存在很多相似的地方,你可能会把所有样式重复声明两次,但是更好的做法是创建一个基础的class,然后在第二个class中使用@extend继承。也就是说它继承了第一class的样式,同时可以添加额外的样式,或者对某些样式进行重写。

这点其实非常有用,比如说一些具有标准样式的按钮,同时存在不同颜色的差别,你可以声明一个具有标准样式的class,在按钮中继承这个class,然后设置不同的背景色。

在这篇文章当中,我觉得已经有足够多使用Sass的原因了。最后,非常希望可以帮助你发现Sass能带给你的便利。

本文根据@C.S. Rhymes的《Why should you start learning Sass?》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://medium.com/@chrisrhymes/why-should-you-start-learning-sass-e3d83f2553c2#.skelrkxbd

Gloria

在校大学生,软件工程专业,爱前端,爱篮球,爱挑战。Life is struggle , Be a cool shit . 邮箱:gloria_n@yeah.net.。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/why-should-you-start-learning-sass.htmlMercurial Victory CR7 Low

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/why-should-you-start-learning-sass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部