一、Sass概况

今天来聊聊sass吧，之前用了很久的less，刚开始接触的时候感觉这东西就是个神器。

写CSS时间长了自然就能发现CSS在书写的时候的不足之处，不能嵌套，没有变量，更加不能像js那样用循环自动生成之类的，这些问题全部都被less解决掉了。

less加入了变量，加入了嵌套式写法，还有一大堆好用的功能，在这里就不多说了，今天要说的是sass。其实刚接触less的时候就知道有sass这个东西了，但是那时候的sass很奇怪，写法过于新颖，大家感受一下：

bodymargin: 0padding: 0height: 20pxwidth: 30px...

看出来了么？ 对的，sass早期的时候有规定书写格式，不这么写它就给你报错，这个在习惯上来说一时间是比较难接受的，特别是我们这种写CSS好几年的人来说更加如此，而后面sass的升级版又把它强加的书写格式去掉了可能就是考虑到这方面。

第二个不能接受sass的点就是安装比较麻烦，从事前端开发的人员，电脑上基本上是少不了node的，less可以直接用npm包管理器进行安装，这就很方便了，而sass就相对麻烦一些了，还需要先安装ruby。 因为sass是基rub语言开发的(mac系统自带ruby,后来才知道)从过程来说就多了一步。另外一点，less可以作为一个js文件直接在客户端运行，这无疑又拉近了和前端开发者之间的距离，所以早期的时候大家都比较倾向于less。

Bootstrap也是这么选择的，Bootstrap 3.0就是用less进行开发的。而对于前几年来说，less也足以满足大家的需求了。

但是经过这几年的发展，大家的技术在进步，需求也在变得更加复杂，这时候less就显得有点力不从心了，并不是它不好了，只是对于工作几年的中高级程序员来说，大家需要一个功能更加强大的CSS预处理器。

于是这时候回头一看，sass一直都在我们身边，看看它的文档，虽然写得有点乱，但是各方面都比较符合我们的需求，越看越顺眼了。而且现在的sass也升级了，做到了完全兼容CSS3, 在CSS基础上增加变量、嵌套、混合等功能。可以通过函数进行颜色值与属性值的运算，提供控制指令等高级功能，甚至可以自定义输出格式。

另外一点，随着各大框架的推行，less和sass的编译工作变得越来越简单，安装个loader就好了，不需要全局安装编译器了。另外很多编辑器也自带编译，这样一来，less前期的那些优势荡然无存。那，接下来，跟我一起来看看sass吧。

通过前面的介绍，我想大家已经知道了，sass是一个CSS预处理语言。 在这里要明确一个概念，什么是CSS预处理语言呢?

简单来说CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

再通俗一点，就像是文言文和白话文。 文言文几个字，翻译成白话文就是一片文章。当然在这里只是一个类比。

基本概念理解清楚了，sass有这么多好用的功能，但是我要如何把sass用到我的项目当中呢？请往下看。

二、Sass的安装

前面已经提到了，Sass是用Ruby语言开发的，所以在安装Sass之前，需要先安装Ruby。

这里要注意几点：

Mac系统是自带Ruby的，所以就不需要再次安装啦，所以下面安装Ruby的方法也只适用于Windows系统。

一些基于插件的编辑器，比如vsCode、Atom之类的，不需要安装sass，直接安装插件就可以进行编译。

Windows下安装Sass首先需要安装Ruby, 先从官网下载Ruby并安装。安装的过程中请注意勾选 Add Ruby executables to your PATH添加到系统环境变量。如下图：

Windows下安装Ruby示例图

安装完成之后需要测试安装有没有成功，在命令行工具(cmd)里面运行以下下命令：

rubu -v 如果安装成功会打印下面这句话： ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Ruby安装好了之后，我们就可以利用Ruby的包管理工具gem安装Sass了，同样还是在Cmd里运行以下命令：

gem install sass

安装完成之后，还是老办法检查以下安装是否成功：

sass -v

如果安装成功，则会打印以下代码：

Ruby Sass 3.7.4

看到这里，我们基本上就可以顺利的玩耍啦~ 附上一些其他相关命令～

更新sass:

gem update sass

查看sass版本:

sass -v

查看sass帮助：

sass -h

现在我们写去一点sass代码吧：

body{margin: 0;background: #fefefe;}.box{width: 100px;height: 100px;border: 1px solid #899;}

你没有看错，以上看起来和CSS简直一模一样的代码其实就是sass代码！是不是很神奇？当然这段代码编译使用过后的效果当然也就和CSS一样啦。看到这里，我想说的是，大家学习sass千万不要有任何的负担，因为安装好sass之后，sass就可以和CSS一样写，如果你现在还没有任何的CSS预处理语言的编写经验，你完全可以像以前写CSS那样来写代码。如果你在看这篇文章的过程当中，一不小心学会了一招半式的，那就是提升了。

不过这里有一点需要提一下，sass有两个文件后缀，一个是.sass 一个是.scss scss是sass的升级版，他们都统称Sass 只是文件后缀不一样。然后.sass后缀的文件是固定代码格式的，就是在一开始我提到的那样写：去掉“{}”，去掉“;” 这让代码看起来有点怪，不过习惯就好了。 而.scss后缀结尾的文件就比较友好了，怎么写都可以，而且它是升级版，所以我们以后在使用的过程中就用.scss就好了

写好了sass代码之后，我们就需要把sass编译成CSS然后应用到我们的项目当中了。这个过程就可以称为编译了。

三、Sass 编译

sass编译有很多种方式，如命令行编译模式、编辑器自动编译、编译软件koala、sass-loader等。

先来看第一种：命令行编译

刚才我在test文件夹里面已经建立了一个style.scss文件，现在我需要把这个文件编译成CSS文件，那么我可以先用命令行工具进入这个文件夹 “cd”就是进入某个文件夹的命令，后面跟上你电脑上文件夹的路径就可以了：

cd test

进入文件夹之后再使用sass的编译命令:

sass input.scss output.css

编译成功不会有任何的提示，但是文件夹里面马上就会出现output.css这个文件。

这个input是原本的scss文件的名称，然后output是编译出来之后的CSS文件的名称，这个名称大家可以随意，保持基本命名规则就可以了。

利用命令还可以实时监测某个文件，当这个文件发生变化的时候，自动完成编译过程。

//单文件监听命令

sass --watch input.scss:output.css

在监听成功之后会打印以下代码：

>>> Sass is watching for changes. Press Ctrl-C to stop.

根据提示，这时候按Ctrl + C可以停止这个命令。

在监听的过程中如果文件发生改变，并且自动编译成功则会打印以下代码：

>>> Change detected to: tests.scsswrite output.csswrite output.css.map

利用命令还可以实时监测某个文件夹，这个文件夹下的所有scss文件都会被监听。

sass --watch targetFolder:outputFolder

在监听成功之后会打印以下代码:

>>> Sass is watching for changes. Press Ctrl-C to stop.

前面的targetFolder是要监听的目标文件夹，后面的outputFolder是要输出的文件夹。 比如我想把CSS文件夹里的scss文件编译到style文件夹里，就可以这样写：

sass --watch css:style

在这里要注意一点：这个时候你需要在CSS和style文件夹的共同父级文件夹里面才能开启这个功能，否则会报错。

在编译的时候，还可以配合编译选项，用于调整输出文件。

sass提供四种编译格式：

nestedexpandedcompactcompressed

看看区别：

//未编译样式

.box {width: 300px;height: 400px;&-title {height: 30px;line-height: 30px;}}

nested 编译排版格式

/*命令行内容*/

sass style.scss:style.css --style nested

/*编译过后样式*/

.box {width: 300px;height: 400px; }.box-title {height: 30px;line-height: 30px; }

expanded 编译排版格式

/*命令行内容*/

sass style.scss:style.css --style expanded

/*编译过后样式*/

.box {width: 300px;height: 400px;}.box-title {height: 30px;line-height: 30px;}

compact 编译排版格式

/*命令行内容*/

sass style.scss:style.css --style compact

/*编译过后样式*/

.box { width: 300px; height: 400px; }.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/

sass style.scss:style.css --style compressed

/*编译过后样式*/

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

不同的编译格式得到的代码其实是一样的，只是排版格式不同，大家看情况去用就好了。我的建议是，开发的时候用expanded格式，比较清楚。当你需要发布你的代码的时候，使用compressed格式，这个格式会让CSS文件相对较小。

第二种，编辑器直接编译

相对于第一种编译方式来说，用编辑器来帮助我们编译者省去了我们在开发过程中的很多操作，比如用cd命令进入某个文件夹，退出文件夹之类的，并且不是所有人都熟悉命令操作方式的。这时候就显得这种编译方式可能会更加好用，我在工作过程中大多数也是用这种方式来进行编译的，来看具体操作吧：

注意！用编辑器编译的基础也是安装Sass，所以Sass的安装过程是必不可少的！！！

既然想要让编辑器帮助我们做事情，那么就需要对编辑器的一些配置进行调整。

来看看 webstorm:

依次打开 setting > tools > file Watchers，界面大致如下图：

webstorm页面

打开之后点击左下角的加号，在弹出的界面里选择scss。

webstorm选择scss

选择之后，会弹出一个窗口：

webstorm选择scss的弹出窗口

在这个窗口里有两项需要调整，我已经用红框标出来了。

第一项，Program 这里是需要选择编译所用的程序，点击后面的文件夹图标进行选择；

windows电脑在安装Ruby的文件夹里，如果没有修改的话一般是在C盘：

C:/user/username/AppData/Roaming

Mac电脑一般在“usr/local/bin”，在选择文件的窗口里按快捷键：Command + Shift + G，然后输入：usr/local/bin回车，就可以找到对应的文件夹了。

在文件夹里找到一个名字为scss的文件：

scss

第二项，Arguments 这里主要是设置编译参数，比如前面我们提到的四种编译格式就可以加载这里面，具体看前面的图片。

至此，Sass的准备工作我们就做好了，之后我们可以愉快的coding了…

以上是酷仔今日整理的“CSS扩展语言——Sass入门指南”一文，希望为正在学习Web前端的同学提供学习参考。

特殊说明：以上内容资料由开课吧提供！