sass

Posted 2020-08-16 小数点就是问题

熟练使用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停止监听。