标签：多变量 选择 map hover des 监听 erro for 压缩文件
熟练使用sass可以快速编写css代码；
sass中可以定义变量，方便统一修改和维护。
$pos: absolute;
.btn {
position: $pos;}
css结果：
.btn {
position:absolute;}
嵌套:
sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。
#score { line-height: 60px; padding: 17px 0 0 26px; h2 { font-size: 28px; } li { height: 60px; position: relative; } } css结果： #score { line-height: 60px; padding: 17px 0 0 26px; } #score h2 { font-size: 28px; } #score li { height: 60px; position: relative; }
运算：
sass可进行简单的加减乘除运算等
article[role="main"] { float: left; width: 600px / 960px * 100%; } css结果： article[role="main"] { float: left; width: 62.5%; }
多值变量：
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
$linkColor: #08c #333; a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); } } css结果： a{ color:#08c; } a:hover{ color:#333; } 而它靠nth来获取多变量中对应位置的值； 如：nth($linkColor,1);
for循环：
for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，
这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。
@for $i from 1 through 5 { .page:nth-of-type(#{$i}) { z-index: 11-$i; } } css结果： .page:nth-of-type(1) { z-index: 10; } .page:nth-of-type(2) { z-index: 9; } .page:nth-of-type(3) { z-index: 8; } .page:nth-of-type(4) { z-index: 7; } .page:nth-of-type(5) { z-index: 6; } 关键在于选择器中#{$i}
最简单的编译软件：考拉Koala
高大上的编译方式：
web工作流的gulp方法编译：
var gulp=require("gulp"); /*自动处理全部错误信息防止因为错误而导致 watch 不正常工作*/ var plumber = require(‘gulp-plumber‘); var rename=require("gulp-rename"); var cssmin=require("gulp-minify-css"); var sass = require(‘gulp-sass‘), notify = require(‘gulp-notify‘), autoprefixer = require(‘gulp-autoprefixer‘); // Styles gulp.task(‘styles‘, function() { //编译sass,编译指定目录下的sass return gulp.src(‘src/scss/*.scss‘) .pipe(plumber({ errorHandler: reportError })) .pipe(sass()) //添加前缀 .pipe(autoprefixer(‘last 2 version‘, ‘safari 5‘, ‘ie 8‘, ‘ie 9‘, ‘opera 12.1‘, ‘ios 6‘, ‘android 4‘)) //保存未压缩文件到我们指定的目录下面 .pipe(gulp.dest(‘dest/css‘)) //给文件添加.min后缀 .pipe(rename({ suffix:‘.min‘ })) //压缩样式文件 .pipe(cssmin()) //输出压缩文件到指定目录 .pipe(gulp.dest(‘dest/css‘)) //提醒任务完成 .pipe(notify({ message: ‘Styles task complete‘ })); }); /*默认*/ gulp.task("default",function(){ /*把监听设置为默认的，那样就方便些*/ gulp.start("styles","watch"); }); /*监听*/ gulp.task("watch",function(){ /*src/scss/*.scss监听的路径，styles执行的任务*/ gulp.watch(‘src/scss/*.scss‘,[‘styles‘]); }); function reportError(error) { // 阻止watch停止 this.emit(‘end‘); }
这个方式和上面的考拉差不多，但因为讨厌频繁错误提示，所以把那部分删掉了，简化成只是提示成功和阻止错误时watch停止监听。
标签：多变量 选择 map hover des 监听 erro for 压缩文件
原文地址：http://www.cnblogs.com/zhangzhicheng/p/6014481.html
