CSS预处理器，用一种专门的语言进行页面Web样式设计，编译生成正常的CSS文件以供使用，可以让CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护。
优秀的CSS预处理器语言包括Sass、LESS、Stylus等，本文主要介绍Sass。
Sass是最成熟、稳定、强大、专业的CSS扩展语言。
Sass的两种文件后缀
.sass
这种后缀的Sass文件使用类Ruby的语法，如下，属性之间通过换行分割，而不是分号。这种语法对于我这种属性C++、C等后端语言的前端开发者来说有点不太友好~~~
h1
color: #000
background: #fff
.scss
幸好Sass在3.0版本中引入Scss语法，这种语法是CSS语法的超集，如下，这种语法我就比较喜欢了！
h1 {color: #000; background: #fff}
两种语法没有好坏之分，如果你习惯Python或者Ruby，那Sass对你来说无疑是更好的选择，更对于正统的前端开发者来说，应该会和我一样喜欢Scss语法了。
当然你也可以在一个项目中混合使用两种语法，但注意，不要在一个文件中混合使用两种语法。
两种文件之间的转换也很简单，如下，哪里不会转哪里，so easy~~~
sass-convert main.scc main.sass
Sass安装
安装Ruby
对于使用Windows是我来说，这一步再简单不过了。从这里 下载相应版本的Ruby进行傻瓜安装即可。由于要在命令行使用Ruby，安装时要把Ruby可运行文件加载到PATH里。命令行输入ruby -v 检查Ruby是否安装成功。
Ruby安装完成之后，gem也就安装好了，这就和安装好node.js之后，npm就安装好了一样。
由于国内网络的原因，Ruby原有的sources经常间歇性的链接不上，所以我们首先修改Ruby sources，命令如下：
//移除原有的sources
gem sources --remove https://rubygems.org/
//添加国内淘宝的sources
gem sources -a https://ruby.taobao.org/
//如果上面那个失败的话，可以试试下面这个中山大学的sources（感谢慕课小伙伴提供）
gem sources -a http://mirror.sysu.edu.cn/rubygems/
//检查
gem sources -l
安装sass
gem install sass
//检查sass是否安装成功
sass -v
//也可以指定需要安装的sass的版本,如下：
gem install sass --version=3.3.0
//卸载某一个版本的sass
gem uninstall sass --version=3.3.0
Sass语法介绍（基础篇）
变量
sass的变量使用$符号定义
$headline-ff: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, sans-serif;
变量的使用：
.headline {
font-family: $headline-ff;
}
.main-sec {
font-family:$main-sec-ff;
}
Sass也提供了很方便的嵌套语法，如下：
.main-sec {
font-family:$main-sec-ff;
.headline {
font-family: $main-sec-ff;
}
}
这种用法相当于下面的写法：
.main-sec {
font-family:$main-sec-ff;
}
.main-sec .headline{
font-family:$main-sec-ff;
}
但是对于hover则会出现问题，比如：
a {
:hover {
color:blue;
}
}
它生成的css文件是下面这样的，显然这种结果不符合我们的预期
<!-- a后面有一个空格 -->
a :hover {
color:blue;
}
为了解决这个问题，Sass提供了父选择器&，如下：
a {
&:hover {
color:blue;
}
}
我们一般将变量定义放在一个专门的文件里，比如_variables.scss（加下划线表明是一个局部文件，因为它不需要编译生成对应的CSS文件），在需要使用变量的文件（宿主文件）里，只需要引入这些变量即可，如下：
@import "variables";
Sass里的@import 和CSS里原生的@import
Sass的@import和CSS里原生的@import 指令的不同，CSS里原生的@import指令有两大弊端：
-
必须放在代码最前面，否则不起作用。
-
对性能不利。
比如a引用b，需要浏览器把a下载下来，解析渲染a的时候读到a中@import "b"的指令的时候才会去下载b，此时浏览器处于阻塞状态，延迟页面渲染时间。
而Sass重新定义了@import指令的功能，它在编译阶段将被引用文件合并输出到了相应的CSS文件，而且@import指令可以用在文档的任何地方。
当然，如果你非要使用CSS原生的@import也不是没有可能，一切都有既定的规则，如果满足下面4个条件中的任何一个，Sass就会认为你想使用CSS原生的@import。
- 当@import后面的文件名以.css结尾的时候
- 当@import后面跟的是以http://开头的字符串的时候
- 当@import后面跟的是一个url()函数的时候
- 当@import后面带有media queries的时候
从上面的@import指令可以看到，我们没有给"variables"文件指定后缀名，这是基于Sass的既定规则：
- 没有文件后缀名的时候，Sass会添加.scss或者.sass
- 统一目录下，局部文件和非局部文件不能重名（所有文件都不能重名）
Sass注释
Sass支持下面这两种格式的注释，区别在于第二种格式的注释在编译时会生成的对应的css文件里。
//这是注释
/* 这也是注释*/
网友评论