1.使用CSS预处理器Sass重写你的样式

再次强调，本系列不针对0基础初学者哦。

我们之前一直在讲JS，很少关注过CSS，很多同学可能就对CSS有点轻视了。但其实这几年前端的飞速发展，不仅JS的框架出来很多，CSS也是在不断发展的。比如大家都喜欢用的BootStrap等等。

学CSS预处理器有什么用？

不知道各位有没有写过这种代码？

效果：

一般我们就这么做了，很OK。但这样写有什么问题呢？

想一下，如果业务需要我们要将这个圆改成一半大的，需要改多少代码呢？

这三处都改成50px。

如果这时候需要把主题改成绿色，又得把两处red都改成green。

这还只是简单的一个div，如果是整个页面呢？一般我们页面都是风格统一的，比如链接的颜色，按钮的大小，字体大小等等，一改全改。这时候我们还要一个一个去文件里搜索然后修改吗？显然不能。

或者像这种情况：

像这种代码常见于项目统一样式库中，显然我们直接写也很烦。

最关键的，还无法统一编码风格。。。

CSS预处理器应运而生。

CSS预编译器是什么？

其实就是个工具，这个工具定义了一些语法规则，比如变量、循环等等，我们按她的语法写代码，最终使用工具编译成我们认识的CSS代码。现在主流的CSS预处理器有三种：Sass/Less/Stylus

怎么使用CSS预处理器

之前BootStrap都是使用Less作为她的预处理器，但从BS4开始使用了Sass，所以我们就先来学一下Sass吧。

首先Sass是Ruby语言写的，所以要安装Ruby环境。。

Ruby下载地址：https://rubyinstaller.org/downloads/

下载默认安装之后，运行CMD查看是否安装好：

然后自带一个叫做的系统，用来安装基于的软件。我们可以使用这个系统来 轻松地安装。跟npm很像，替换淘宝镜像源：

然后安装sass，这里顺带装一下compass，compass是啥呢？就是sass的一个工具库，就像nodejs和express的关系一样。可以通过这个框架方便的做很多操作。

//如mac安装遇到权限问题需加 sudo gem install sass

gem install sass

gem install compass

然后我们看下是否安装成功：

OK，现在就可以正式的使用Sass了。具体的语法可以去看Sass中文网，我们这里先简单的带大家尝个鲜。

新建个这样层级的目录：

注意新建文件的后缀名是scss，其实还有中.sass文件，但那语法是ruby风格不适合我们，所以大家就当不知道吧。

sass中定义变量，采用$做开头：

然后现在我们来试一下使用sass编译：

注意要先进入项目文件夹。

OK，如果代码写的没问题，就能编译通过，通过不会有提示，失败则会打印信息。

此时我们再看项目文件夹，发现css下面多了个common.css文件，打开一看：

成功了，变量被完美识别。以后重复的地方改一次值就行了。

比如为了测试统一边框，最后直接改成None：

编译一下：

这里先打断一下，我们来看下compass库有啥用：

其实变量也是可以引用变量的：

哦，变量也是可以运算的，加减乘除：

编译后：

试试循环呢：

当使用 时，条件范围包含 与 的值，而使用 时条件范围只包含 的值不包含 的值。

还可以each一下：

编译成：

甚至还可以这么玩：

编译后：

还有个很有用的是后代样式选择器，从现在也开始变得简单了，直接嵌套，非常的语义化：

编译后：

但有些时候你可能希望这样：

刚才那样显然不能满足了，但如果在单独写又显得非常不sass，所以要这样写：

属性也可以嵌套呢：

编译

最后再说一个非常屌的东西，叫mixin，其实就是样式复用，但不知道各位能不能理解其中的妙处。我们最开始写样式都会这么写：

但随着自己学习的深入，开始主动想到样式封装复用了，这时候你就高级了：

页面调用：

其实能这样做，说明你前端已经算入门了。毕竟少写了很多重复代码，但这样有没有问题呢？显然是有的，尤其是前后端不是一个人开发的时候：

1、页面重构时，需要频繁修改class，这个问题在后端人员负责HTML开发的时候格外突出，比如JSP，前后端耗费很多沟通成本。

2、造成了代码的可读性和可维护性下降。如果你要改动规则，需要同时修改HTML和CSS，也可能造成新的样式问题。

如果我们想要建立一种代码风格，改动样式时不至于通知后端改模板。比如将上面这个例子的class“test c-red f-left font20”换用一个有实际语义的类名如title，然后在CSS内部实现mixin。就会好很多

而这正是CSS的短板，CSS体系内的用法只有复制粘贴。

到底啥意思呢？

可以带参数，你懂的。

编译后：

是不是感觉兜兜转转又回来了？代码跟刚开始不一样嘛？

显然不一样，务必知道，这CSS代码不是我们自己写的了，而是sass代码生成的，我们将样式复用从HTML层转移到了CSS层，此时的HTML只需要那个title就行了。至于样式咋复用呢：

看懂了吗？虽然最终生成的文件大小可能比那种直接使用class来复用的大。但其实最后放到生产环境时经过压缩，相差无几的。比起动不动修改HTML页面，真的好多了。

还有一点，其实不管啥语言，注释都很重要。

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

好了，就简单地介绍到这里吧，更多可以到SASS中文网看，而且其实sass提供了各平台的版本，比如node-sass等等，大家可以了解下。

哦，对了，肯定有同学会想，我写一句代码就得编译一下，好烦啊，这效率还不如直接写。能不能像Ng2那样，我一保存scss文件，就自动执行编译出css文件呢？当然可以了：

//单文件监听命令

sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：

sass --watch app/sass:public/stylesheets

但开个黑窗口还是很烦，工具里有没有插件直接做这个事呢？也是有的，我们这里就拿国人比较喜欢的HBuilder举例子吧：

工具=>预编译器设置=》.sass（存在则编辑否则创建）

这个触发命令地址就是ruby安装目录的地址，然后进bin找sass.bat

BootStrap是真厉害啊，直接引领了一波扁平化风潮。现在虽然很少有人直接用BootStrap来项目，一般都是二次开发过的UI框架。但几乎所有的现代UI框架都是基于BootStrap或者是多多少少参考过BootStrap的设计和编码风格的。

那BootStrap说白了就是样式很牛逼嘛。关键还有那种主题样式文件，比如紫色/黑色/白色/蓝色等等，甚至还可以自定义主题。可以想一想很多地方都是一样的高度，一样的色彩，如果一改就得改很多处，写的很痛苦。这时如果使用了预编译器就会方便很多。

如果看完觉得有用，可以转发一下的。