scss基础用法

1、声明变量

$变量名:变量值;

$primary-color:#999999;

2、伪类嵌套

scss

span{                                       
  color:#666666;  
  &:hover{
    color:#888888;
  }
}

-----------------------------
css

span{                                       
  color:#666666;
}
span:hover{
  color:#888888;
}

3、混合宏  @mixin @include

当样式变得越来越复杂，需要重复使用发段的样式时使用混合宏就比较好了。

但是混合宏也有一些不足：会生成冗余的代码块。

带值的参数
@mixin radiu-class($radius:5px){
  border-radius:$radius;
}
------调用------
.btn{
  @include radiu-class;
}


不带值的参数
@mixin radiu-class($radius){
  border-radius:$radius;
}
------调用------
.btn{
  @include radiu-class(20px);
}

没有参数的
@mixin radiu-class{
  border-radius:20px;
  color:red;
}
------调用------
.btn{
  @include radiu-class;
}

4、扩展/继承  @extend

使用关键词“@extend”来继承已存在的类样式快，从而实现代码的继承。

.txt{
  color:#999999;
  font-weight:600;
  font-size:20px;
}

.p-class{
  font-family: PingFangSC-Regular, PingFang SC;
  @extend .txt;
}

5、占位符 %placeholder

如果不被extend引用，它是不会被编译，也就是：不会占用css文件大小。这是和继承最大区别。

----scss
%btn {
  border: 1px solid blue;
}

// 没有被extend
// 不会出现在css文件中
%test-btn {
  border: 1px solid black;
}

.btn--primary {
  color: black;
  @extend %btn;
}

.btn--info {
  color: gray;
  @extend %btn; 
}

----编译后的css代码：

.btn--primary, .btn--info {
  border: 1px solid blue; 
}

.btn--primary {
  color: black;
}

.btn--info {
  color: gray; 
}