scss 基本语法及使用

1.变量

  $color-white:#fff
 p{
    color:$color-white;
  }

2.嵌套普通标签

$color-white:#fff
div{
   p{
     color:$color-white;
   }
}

3.嵌套伪类：通过“&”实现

a{
 color:#fff;
  &:hover{
   color:#000
  }
}

4.混合：@mixin 和 @include

 // 基础 @mixin名称
@mixin test{
   width:100px;
}
div{
  @include test;
}
// .可以传参数 @mixin名称（option1,option2,...）{
   ...
}
@mixin test($width){
  width:$width;
}
div {
  @include test(100px)
}
// 设置参数默认值
@mixin 名称 （option1:value1,option2:value:2,...）{
  ....
}
@mixin test($width,$height:100px){
  width:100px;
  height:$height;
}
div {
  @include test(100px)
}

5.继承扩展：@extend 会继承指定元素的所有样式，包括子元素的所有样式

 
.test1{
  width:100px;
 }
div{
  @extend .test1;
  height:10px;
}

6.导入样式：@import

 @import 'color';

链接：https://www.cnblogs.com/ting6/p/9725672.html