记录：方便后续能快速学习并运用

1 变量

使用$符号来标识变量

$div-color: #F90;

div{
    color:$div-color
}

2 嵌套

#container{
    div{
        color:red;
    }
}

2.1 父选择器的标识符&

&表示父级名称

.container {
    &:hover{
        color:red;
    }
}

2.2 # 子组合选择器和同层组合选择器：>、+和~

+表示元素后紧跟的元素

<div class='a1'>home</div>
<div class='a2'>home</div> //生效
<div class='a2'>home</div>


a1 + a2 {
    color:red;
}

~表示元素后的所有元素

<div class='a2'>home</div> //不生效
<div class='a1'>home</div>
<div class='a2'>home</div> //生效
<div class='a2'>home</div> //生效


a1 ~ a2 {
    color:red;
}

>表示元素内部的子组件

<div class='a1'>home
    <div class='a2'>home
        <div class='a2'>home</div>
    </div>
</div>
a1 > a2 {
    color:red;
}
//感觉用处不大

2.3 嵌套属性

通过:把子属性写进{}

#container {
    border:{
        style: solid;
        width: 1px;
        color: #ccc;
    }
    background:{
        size:100%;
        color:red;
    }
}

当设置border且不要上左边框时

#container{
    border:1px solid red {
        left:0px;
        top:0px;
    }
}

3 导入SASS文件

@import 导入

3.1 默认变量值

设置过多会被覆盖，可以设置!default給变量设置为默认值

$div-color:red;
$div-color:cyan !default;
$div-color:yellow;

3.2 嵌套导入

可以将局部scss文件引入到css规则内

#container{
    @import('../../css.scss')
}

4 混合器

通过@mixin可以编写一段重复可利用的样式,通过@include引入

@mixin div-style{
    color:red;
    font-size:12px;
}

div{
    bgColor:red;
    @include div-style
}

4.1 给混合器传参

多个相同的标签，传入不同的参数，显示不同的效果

@mixin div-style($bgColor,$color){
    background:$bgColor;
    &:hover{
        color:$color
    }
}
.div1 {
    @include div-style(red,white)
}
.div2{
    @include div-style(red,cyan)
}

4.2 默认参数值

@mixin div-style($bgColor,$color:$bgColor){
    background:$bgColor;
    &:hover{
        color:$color
    }
}
.div1 {
    @include div-style(red)
}

5 使用选择器继承来精简CSS

通过@extend继续其他标签的样式

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

Sass中文文档