sass、scss

sass安装环境

gem install sass
gem install compass

sass文件的使用

将sass转成css

sass ./sass/a.sass ./css/a.css 将sass转成css文件
link href="./css/a.css"

改变sass自动更新对应的css

sass --watch ./sass:./css 之后当前终端暂且不要使用。

scss

sass --watch ./scss:./css 监听scss下的scss文件，自动更新对应的css文件

但注意只有伪类:hover 或者伪元素会用这几个符号
&代表父元素 只针对当前scss文件的结构，判断父元素
+代表兄弟元素

例子

div{
    $w:50px;
    position: absolute;
    //子代.div1
    >.div1{
        width: $w;
        height: $w;
        border: 1px solid #000000;
        span{
            color: #FFFF00;
        }
    }
    >.div2{
        width: $w*2;
        height: $w*2;
        background-color: red;
    }
    //后代span  不一定是子代
    span{
            color: #FFFF00;
        }
    &:hover{
        background-color: blue;
    }
    +span{
        color: red;
    }
    //class名为span1的下一兄弟元素的div
    .span1+&{
        border:1px solid #FFFF00;
    }
}

scss语法

npm i gulp-sass --save-dev
.div1{
@import “./a” //导入a.scss //直接将a.scss内选择器内容作为当前.div1的后代样式
.div1 div(a.scss中的选择器是作为div1的子代){}
@import url("./a.scss") //用的时候导入
}

混合器

@mixin setBox {   (定义函数)
    width:100px;
    height:100px;
    background-color:red;
}
div{
    @include setBox();//引入到div的样式中(函数执行)不作为子代
}
//带参数的版本
@mixin setBox($w,$h,$color:red){ //如果参数里有参数，下面执行的时候可以不带color的参数
    width:$w+px;
    height:$h+px;
    background-color:$color
}
div{
    @include setBox(50,50,red)
}

继承

.div3{
    @extend div  //继承div的样式
    @extend .div1  //继承div1的样式
}

相当于
.div1,.div3{} 也就是说是同级的并列关系，css样式是同一套

条件

@mixin setBox($w,$h,$color:red){ 
    @if $w>100 {
        $w:100;
    } @else if $w<0{
        $w:0;
    }
    width:$w+px;
    height:$h+px;
    background-color:$color
}

for

@for $i from 1 through 9{  //循环9次 i(1-9)
    .div-#{$i} { //#{$i} 连接上$i
        @include setBox($i*20,50,green)
    }
}

@each

@each $name in a , b , c , d {
    #{$name}-img{
        background-image: url('#{$name}.jpg');
    }
}

以下为两种写法

@each $w,$h,$c in (50,100,200,300,400,500),
                  (100,100,200,50,300,400),   
                  (red,green,pink,blue,yellow,black){
                     .div-#{$c}{
                         width:
                     }
        }

@each $w,$h,$c in (50,100,red),
                  (100,100,green),
                  (100,100,green),
                  (100,100,green),
                  (100,100,green),
                  (100,100,green),
                  {
                      .div-#{$c}{ //.div-red
                          @include setBox($w,$h,$c)
                      }
                  }

while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

利用gulp加载scss

在gulp的配置文件gulofile.js中写入

 var gulp = require('gulp'),
     sass = require('gulp-sass');

 gulp.task('default',function(){
     gulp.src('./scss/*.scss')
     .pipe(sass())
     .pipe(gulp.dest('css'));
 });