scss预处理器

css预处理器添加了原生css没有的功能，而且使css更加整洁并且更加可维护

批量修改属性值

创建变量

它使我们能够写出更好维护的css
重新编译会花费一些时间

通常我们写外部样式会直接建一个.css后缀文件；但是用预处理器就要建.scss文件然后打开考拉自动生成.css文件；当然引用时肯定引用自动生成的,css文件。

$起一个名字定个变量，直接引用

$cl:yellowgreen;
div{
color：$cl:
}

mixin（迷信）混合器
通过@mixin来定义一个函数，@include来引用
不带参数：

// mixin混合器(不带参数)
$w:100px;
$h:100px;
$bc:deeppink;
@mixin name {
           width: $w;
           height: $h;
           background-color: $bc;
 }

引用section{ @include name; }在这里插入代码片
带参数：

// mixin混合器(带参数) 
 @mixin name($a,$b,$c) {
           width: $b+20;  （可以做加减乘除运算）
           height: $a;   
           background-color: $c;   
            }

如：&:nth-child(1){ @include F66(50px,50px,red); }
&代表父元素//代表父级被XXX时（hover） &:hover { color: red; }.
.name{
color:red;
font-size: 30px;
background-color: antiquewhite;
}
用@extend 引用
@extend .name;

``

 aside{        
 &:nth-child(1){ @include F66(50px,50px,red);        }        
            &:nth-child(2){
                 @include name(80px,80px,yellowgreen);
                    }       
             &:nth-child(3){            
             @include name(90px,90px,purple); 
                    }        
             &:nth-child(4){           
              @include name(50px,50px,blue); 
                     }        
              &:nth-child(5){ 
                         // 使用混合器(引用混合器)            
              @include name(80px,80px,deeppink);            
              //继承其它标签的样式            
              @extend .name;            background-color: transparent;
        } 
           }