转载

为什么要开始学习Sass

本文不会像一些其它文章一样，教你如何开始使用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的颜色属性时候，不需要再去重复写多个一样的 hex ， rgb 值，你可以把它写在一个变量里。

这样做的好处就是，当你的客户想把红色设置稍微粉一点，你只需在变量定义的地方修改颜色的值。另外一个好处就是，相比 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 。