scss预编译的基本使用

scss是一个css预处理器

它能以更简洁,更易于读取与维护的方式将css表示出来

scss的变量

scss的变量在前面加一个$来定义,这个变量可以在scss的任何地方复用,可以使代码易于修改

$black:#000
.box{
backgroundcolor:$black
}

嵌套css

在scss允许在一个标签内加入多个标签,让代码更加简洁

.father{
.son{
color:blue
}
}

&代表父级

.app{
    &:hover{
        
    }
}

混入用法

用@mixin 方法名（$变量）定义一个变量

定义：
@mixin 方法名($width,$height){
    width:$width;
    height:$height;
}
调用：
  .app{
      @include 方法名(实参值1，实参值2)
  }

继承

@extend 来继承变量

定义
   %setBorder{
       border:1px solid red;
   }
使用：
  .app{  
      @extend %setBorder;
  }