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