介绍

sass是一个预编译（预编译好后会自动编译成css文件）的css，需要相关环境来进行解析

sass有俩种后缀名

1 .sass（用缩进来区分 层级关系（没有；没有{} 不支持英文单词颜色））

div
 color:#fff
 font-size:18px

2. scss （和正常的css一样的写法）

div{
background-color: red;
}

sass的变量定义（使用$符号定义）

支持运算符（+ - * / %）

//在sass中 双斜杠的注释不会生成到css文件中

/* 这种注释才会生成到css文件中 */
$a:10px;
#content{
    font-size:$a //变量的使用
    wigth:$a * 20;
    height:$a / 2;
    margin:$a - 30;
    padding$a + 30;
    line-height:$a % 3;
}

编译成css

/* 这种注释才会生成到css文件中 */
$a:10px;
#content{
    font-size:10px 
    wigth:200px;
    height:5px;
    margin:-20px;
    padding:40px;
    line-height:1px;
}

sass中的条件判断

• @if 满足条件进入
• @else 不满足上面的条件进入

//条件判断
$width: 400px;
.box{
//如果宽度大于300
@if $width > 300{
    font-size: 14px;
}
//否则
@else {
    font-size: 20px;
}
}

编译后

.box{
    font-size:14px;
}

sass中循环控制

@while

//while循环
$i: 6; 
@while $i > 0 { //条件大于0
.box-#{$i} {font-size:5px * $i;}
$i: $i - 2; //每次-2
}

@for

//从0到5 包含0 不包含5
@for $j from 0 to 5{
    .list-#{$j}{width:10px + $j;}
}

@each

//定义多个值在arr里面
$arr:1,2,3,4,5,6;
//$i 取 $arr 里面的值
@each $i in $arr {
.size_#{$i}{font-size: 16 + $i * 2 + px;}
}

sass中的关系

父子关系（嵌套包含）

div{
    margin:0;
    //直接嵌套在父元素内
    a{
        color:#000;
    }
}
//针对伪类 &表示当前元素
div{
    &:hover{
        color:red;
    }
}

继承 @extend

div{
    font-size:20px;
}
p{
    @extend div
    line-height:20px;
}

sass中的函数 （提供复用的表达式）

//@function 定义函数
//@return 返回值

//@function 函数名(参数){}

@function sum($first,$last){
    @return $first + $last;
}

body{
//调用
width: sum(10px, 20px);
}
//函数可结合判断 循环一起使用

编译后

body {
    width: 30px;
}

sass中的混入器 （公共代码块，支持传参）

@mixin 定义混入器

@include 导入混入器

@mixin public_Style{
    float:left;    
}
//使用
.item{
    @include public_Style();
}
//传参的混入器    形参:这里设置默认值
@mixin border_Mixin($width,$line,$color) {
    border: $width $line $color;
}
//使用
ul{
    @include border_Mixin(2px, solid,#ccc)
}

编译后

.item{
   float:left;
}
ul {
    border: 2px solid #ccc;
}

占位选择器 %

//占位选择器 结合@extend 使用%来进行占位
#content %a a{
    font-size:20px;
}
.main{
    @extend %a;
}
.footer{
    @extend %a;
}

编译后

#content .main a,#content .footer a{
    font-size:20px;
}

@import 导入

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

导入样式到选择器内

#main {
    @import "example";
}