前言
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
以上是Sass官网的介绍。Sass相信很多人都耳熟能详，它是一款CSS预处理器，是一门编程语言，通过少量的Sass代码，通过编译转换成CSS文件。掌握Sass已成为前端工程师必备技能。
安装与使用
Sass是基于ruby语言编写的，也就是说，Sass的编译需要ruby环境下的Sass去编译，但我们不需要去学习ruby，只需安装好即可。ruby下载地址
安装好ruby以后，打开windows cmd窗口，输入ruby -v，显示出版本号就代表安装完毕了。
ruby当前稳定版本号为2.3.0
sass文件本身是有两种格式，一种叫.sass，另一种叫.scss。
它俩有和区别？请看下面。
sass文件书写格式
/* sass文件书写格式 */
body
color: #fff
background: #f36
scss文件书写格式
/* scss文件书写格式 */
body{
color:#fff;
background:#f36;
}
编译出来的CSS文件
body{
color:#fff;
background:#f36;
}
观察上面的代码可以看出，.sass后缀的代码没有大括号、没有分号，严格缩进，这种书写方式和python一样。但对于前端开发人员来说非常的不友好，所以后来推出了.scss后缀的版本，来适应前端开发人员的习惯。后面演示都之以.scss为主。
那么怎样把.scss转换成css文件呢，前面的ruby环境就起了作用，在安装好ruby之后，接着安装Sass。
在cmd窗口下输入如下命令。
gem install sass
安装完成后，再输入如下命令。
sass -v
sass版本号
显示出版本号后，即Sass安装成功。
安装完成后即可直接使用，在cmd下切换到一个叫style.scss文件所在目录，代码如下。
$color: red; // 定义一个变量
body {
color: $color; // 使用变量
border: 1px solid $color;
}
在cmd下输入如下命令。
sass style.scss
结果被输出在cmd上。
结果输出
如果想要把输出的文件保存下来，可以输入如下命令。
sass style.scss style.css
两条命令在部分情况下等价，但强烈推荐标准来，使用冒号而不是用空格。
sass style.scss:style.css
文件会被保存在当前目录下，名为style.css，内容格式与输出在cmd上的一样，若不想输出到当前文件夹可以用相对路径，比如../../style.css。
而且SASS提供四个编译风格的选项：
- nested：嵌套缩进的css代码，它是默认值。
- expanded：没有缩进的、扩展的css代码。
- compact：简洁格式的css代码。
- compressed：压缩后的css代码。
该参数跟在--style的后面，空格隔开，如下代码所示。
sass --style compressed test.sass:test.css
多文件编译如下代码所示，将当前目录的 scss文件夹下的所有.sass/.scss文件，全部编译到当前目录下的css文件夹下。css文件夹必须存在，否则报错。
sass --update scss/:css/
也可以配合--style参数一起使用。
sass --update scss/:css/ --style compressed
每次修改scss文件后，都要去手动编译，sass为我们提供了另外一个参数watch，监控文件变动自动编译。scss/为监控目录，css/为输出目录，都可以使用相对路径。
sass --watch scss/:css/
其他方式编译
如果用不习惯命令操作，可以使用GUI编译器。
Koala (http://koala-app.com/)
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）
Prepros（https://prepros.io/）
其中我更喜欢koala，强烈推荐。
koala界面
如果你使用前端自动化构建工具grunt或gulp，可以使用编译sass的插件进行自动编译和输出。我目前使用的gulp构建工具，gulpfile.js的配置如下。
var gulp = require('gulp'); //加载gulp
var sass = require('gulp-sass'); //加载sass
// 手动执行编译命令
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
监听任务
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
默认任务
gulp.task('default', ['sass','watch']);
总结
本小结主要针对sass的安装、后缀名版本、sass命令使用，以及三种编译方式做了简单的介绍，下一节我们将直接进入sass基础。
网友评论