sass的用法

一、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文件