爱站程序员基地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\'));});
