sass 介绍
Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。
Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本。 也就是说，所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外，SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。
另一种比较老的语法成为缩排语法（或者就称为 “Sass”）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读，书写也更快速。 缩排语法具有 Sass 的所有特色功能， 虽然有些语法上稍有差异； 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。
本文主要以 Sass 为例。
sass安装
在安装前要确保安装 ruby 环境，参见 ruby 官网
然后在命令行中输入
|
1 2 |
gem install sass |
即可安装成功
将 sass 转成 css 并压缩
本文将主要说明将 sass 转成 css,将 css 压缩详见[gulp] 压缩 css、js
还是[gulp] 压缩 css、js 一文中的项目，我们添加 sass 文件夹，并添加 example.sass 文件
先安装所需要的 gulp 插件，
|
1 2 |
npm install gulp-sass --save-dev//编译 sass 文件 |
打开项目根目录，添加如下代码
|
1 2 3 4 5 |
gulp.task('sass',function(){ return gulp.src('sass/*.sass')//编译的文件 .pipe(sass())//编译 .pipe(gulp.dest('css'));//输出到css文件夹}); |
此代码是将 sass 文件编译成 css 文件后输出到 css 文件夹，这就可以直接运用上文中已写过的代码。不过代码中还有两处要稍作修改。
require 所用的编译插件
|
1 2 |
sass = require('gulp-sass')， |
编译必须要先执行，否则会造成编译生成的文件无法被压缩，因为编译和压缩是同时进行的。修改代码，使编译执行后再进行压缩
|
1 2 3 |
gulp.task('default',['sass'], function() { gulp.start('minifycss', 'minifyjs');}); |
完成后的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var gulp = require('gulp'), sass = require('gulp-sass'), minifycss = require('gulp-minify-css'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'); gulp.task('sass',function(){ return gulp.src('sass/*.sass')//编译的文件 .pipe(sass())//编译 .pipe(gulp.dest('css'));});//输出 gulp.task('minifycss', function() { return gulp.src('css/*.css') //压缩的文件 .pipe(concat('main.css')) .pipe(gulp.dest('minified/css')) //输出文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件夹 .pipe(minifycss()) //执行压缩 .pipe(gulp.dest('minified/css'));}); gulp.task('minifyjs', function() { return gulp.src('js/*.js')//压缩的文件 .pipe(concat('main.js')) //合并所有js到main.js .pipe(gulp.dest('minified/js')) //输出main.js到文件夹 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名 .pipe(uglify()) //压缩 .pipe(gulp.dest('minified/js'));//输出}); gulp.task('default',['sass'], function() { gulp.start('minifycss', 'minifyjs');}); |
执行 gulp
|
1 2 |
gulp |
然后可以看到css文件已生成
压缩的文件也已生成
感想
sass 是 css 的预处理文件，更方便管理和读写，比死板的 css 好上不少，而且可以很方便的转成 css。