一、sass的安装
sass的安装依赖Ruby，所以在安装sass之前首先要安装Ruby
https://rubyinstaller.org/downloads/ ruby下载地址
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
检测ruby是否安装成功
ruby -v
安装sass和compass
gem install sass
gem install compass
检查安装是否成功
sass -v
compass -v
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
二、sass的文件的创建
sass的文件后缀名为.scss
三、sass的语法
1.定义变量
$red:'red'
$border:5;
2.使用变量
div{
color:$red;
border:solid #{$border}px $red;
}
组合使用 前面要加一个#{ }
3、sass的计算
$margin-top:10;
$margin-top2:20;
div{
margin-top:#{$margin-top}px*#{$margin-top}px
}
4、sass的继承（一）
.center{
text-align:center;
}
.box{
@extend .center;
}
5、sass的继承（二）
@mixin center($p){
text-align:$p;
}
.box{
@include center(left);
}
6.引入外部scss文件
@import "2";（引入scss时，可以省略后缀名.scss,但是引入css的时候不能省略）
7、if-else语句
@mixin bgColor($border){
@if($border<=5){
background-color:$green
}@else if($border>=5 &&$border<=10){
background-color:$red;
}@else{
background-color:$blue;
}
}
.box{
@include bgColor(11);
}
7、遍历(for , while,each)
@for $i from 1 to 5{
.a#{$i}{
background:url('images/#{$i}.png');
}
}
$j:1;
@while $j<5{
.b#{$j}{
background:url('images/#{$j}.png');
}
$j:$j+1;
}
@each $k in 1,2,3,4{
.c#{$k}{
background:url('images/#{$k}.png');
}
}
8、函数
@function colorrgba($r,$g,$b,$a) {
@return rgba($r,$g,$b,$a);
}
.box{
color:colorrgba(20,30,40,0.8);
}
四、cmd编译
1、打开cmd 执行
sass xxx.scss(scss文件) xxx.css（编译后css文件）
2、在sublime中安装sass和sass-build插件，写完scss代码之后，ctrl+b，就可以在当前目录下编译成对应的css文件
