为什么要开始学习 Sass

Question

本文不会像一些其它文章一样，教你如何开始使用 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文件里我很难回想起各个规则的位置。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的原因了。