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'));});