SASS基础

1、变量

常规变量

用!global将局部变量变成全局变量

//全局变量
$a-color:blue;//全局变量
.box{
    color: $a-color
}


//局部变量
.child{
    $a-color: red;//局部变量
    color: $a-color
}


//将局部变量变成全局变量
.box2{
    $c-color:yellow !global;
}

.box3{
    color: $c-color
}
//全局变量
$a-color:blue;//全局变量
.box{
    color: $a-color
}


//局部变量
.child{
    $a-color: red;//局部变量
    color: $a-color
}


//将局部变量变成全局变量
.box2{
    $c-color:yellow !global;
}

.box3{
    color: $c-color
}

特殊变量

当变量是css属性的一部分，或者变量是css属性的时候，必须要遵循 #{变量名}的格式

//注意，当是css属性，或者是css属性的一部分，请必须遵循
//#{$变量名}格式

//当是css属性的一部分
$side:top;
.box{
    border-#{$side}:1px solid #ccc; 
}

//当是css属性的时候
$bordertop:border-top;
.box2{
 margin-#{$side}: 12px;
 #{$bordertop}:18px solid #ccc
}

2、 嵌套

常规嵌套

//嵌套,将子选择器的样式，嵌套在父选择器的样式中
ul{
    font-size: 12px;
    li{
        color: yellowgreen;
        a{
            text-align: center
        }
    }
}

嵌套中的父级选择器 &

//嵌套,在子选择器中，有时候我们需要使用父元素的选择器，用&符号
ul{
    li{
        float:left;
    }
    &::after{
        content: "";
        display: block;
        clear: both;
    }
}

嵌套，跳出选择器嵌套

//用@at-root跳出选择器
div{
    width: 100px; 
    height: 100px;
    background: red;
    position: relative;
    animation:mymove 5s infinite;
    @at-root{
        @+ mymove {
            from{left: 0px;}
            to{left: 200px;}
        }
    }
}

3、运算

.box{
     height: 10px + 20px;//加
     width:40px-10;//减
     margin-left: 10px * 2;//乘
     padding-left: (75rem/10);//除法要加上括号
     font-family: 'Courier'+' New';//字符串的加
     position: relative;
     top: 1em+(2em-1em);//带括号运算
}

4、条件语句

//条件语句
$string:just-test;
$flag:null;
body{
    @if($string==just){
        color: red
    }
    @else if($string==test){
        color:yellow
    }
    @else{
       color:blueviolet
    } 
}

5、循环语句

@for 变量 from 包含end 变量从start到end
@for 变量 to 不包含end 变量从start到end（不包括end）

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

@for $test from 1 to 3{
    .new#{$test}-test{
        color: yellow
    }
}

@for 变量 in 变量依次遍历 list集合

@each $var in one,two,there{
   .#{$var}-icon{
    background:url(image/#{$var}.png);
   }
}

6、混合Mixin

不带参数的Mixin（把mixin看做是function更容易理解）

@mixin win {
    position:fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    background:rgba(0, 0, 0, .5)
}

.box{
    @include win()
}

带参数的Mixin

@mixin font($size){
   font-size: $size+px;
   color: blue
}

.box{
    @include font(15)
}

7、函数指令

自定义函数，@function @return

//自定义函数
@function box-width($param){    
    @return $param/10+rem;
}

.box{ width: box-width(750)}

继承

让一个选择器，继承另一个选择器的所有样式

//继承,直接在@extend的后面加上选择器的名称
h1{
    background: #ccc;
    font-size: 15px;
    width: 50px;
}

.box{ @extend h1}

继承（占位选择器%）

当我们在开发项目的时候，我们可能预设了很多样式，有些我们使用了，有些我们可能都没有用到，但是那些没有用到的样式，我们不想在css中解析出来，这时我们可以用站位选择器去预设我们需要的样式，当需要使用的时候直接@extend用就可以了。

//占位选择器
%red{
    border: 1px solid red;
    color: red;
    background: red;
}

.box{
    @extend %red
}

8、导入

当我们在拿到一份设计稿的时候，我们一般会想到将页面拆分成多个模块，比如头部，中间部分，尾部。在sass中，我们可以实现css的模块化编码，这时，我们只需要将多个模块统一用@import的方式引入到主模块中即可。
_head.scss

header{background: red}

_main.scss

main{background:blue}

_foot.scss

footer{ background: green}

style.scss

//引入各模块
@import "_head";
@import "_main";
@import "_foot";
.myself{ background: #ccc}

扩展

在vscode中装插件。Live Sass Compiler。将Sass转成css