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

写CSS时间长了自然就能发现CSS在书写的时候的不足之处：

不能嵌套，没有变量，更加不能像js那样用循环自动生成之类的，这些问题全部都被less解决掉了。

less加入了变量，加入了嵌套式写法。

还有一大堆好用的功能，在这里就不多说了。

今天要说的是sass。其实刚接触less的时候就知道有sass这个东西了。

但是那时候的sass很奇怪，写法过于新颖，大家感受一下：

body

margin: 0

padding: 0

height: 20px

width: 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前期的那些优势荡然无存。

这里推荐一份大而全的前端全栈资料，更多前端知识点信息，1毛钱带走

那，接下来，跟我一起来看看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添加到系统环境变量。

如下图：

安装完成之后需要测试安装有没有成功，在命令行工具(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代码吧☟

你没有看错，以上看起来和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.scss

write output.css

write 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提供四种编译格式：

nested

expanded

compact

compressed

看看区别：

//未编译样式☟

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 expand-ed

/*编译过后样式*/

.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 compr-essed

/*编译过后样式*/

不同的编译格式得到的代码其实是一样的，只是排版格式不同，大家看情况去用就好了。

我的建议是，开发的时候用expanded格式，比较清楚。

当你需要发布你的代码的时候，使用compressed格式，这个格式会让CSS文件相对较小。

第二种，编辑器直接编译

相对于第一种编译方式来说，用编辑器来帮助我们编译则省去了我们在开发过程中的很多操作。

比如用cd命令进入某个文件夹，退出文件夹之类的，并且不是所有人都熟悉命令操作方式的。

这时候就显得这种编译方式可能会更加好用。

我在工作过程中大多数也是用这种方式来进行编译的，来看具体操作吧：

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

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

来看看 webstorm:

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

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

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

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

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

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

C:/user/username/AppData/Roaming

Mac电脑一般在“usr/local/bin”，在选择文件的窗口里按快捷键：Command + Shift + G，然后输入：

usr/local/bin回车

就可以找到对应的文件夹了。

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

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

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

愉快 Coding还离不开web全栈和架构师的进阶学习资料，点击下方即可购买，还有超多大厂面试指南，等你解锁。