SCSS基础了解

1. 变量
   通过$符合去声明一个变量,通常存储css中要复用的样式,例如字体、颜色等。
   Sass 变量使用 $ 符号：$variablename: value;

eg:
$global-color: #efefef;
$global-font-size: 14px;

2. 嵌套
   以嵌套的方式使用css
   下面的例子，ul,li,a都被嵌套在nav下面，nav相当于父级，只有在nav下的ul,li,a才会具有定义的样式。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 引入
   使用@import可以导入其它文件等内容
   Sass @import 指令语法如下：@import filename;

eg:
@import '../../assets/scss.scss';

分音(Partials) Sass Partials
如果你不希望将一个sass文件编译为css文件，可以在文件名的开头加一个下划线，这将告诉scaa不要将其编译到css。但是，在导入语句中我们不需要加下划线
Sass Partials 语法格式：_filename;
注意⚠️：请不要将带下划线与不带下划线的同名文件放在同一目录下，比如colors.scss与_colors.scss不能放置于同一目录下，否则，带下划线的文件将会被忽略。

可以嵌套引入

#main {
  @import "example";
}

4. scss作用域

<style lang='scss' scoped>
//变量
$color: rgb(5, 4, 4);
//引入:使用@import 文件路径  即可
@import '../../assets/scss.scss';
.scss{
    color: $global-color;  //@import引入的
    ul{
        font-size: 18px;
        color: $color;
        text-align: left;
    }
    h3{
        $color: #b2b2b2;   //只在h3内有效，局部作用域
        color: $color;
    }
}
</style >

scss中还可以使用!global来设置变量是全局的

$color: rgb(5, 4, 4) !global;

5. 混入
   通过@mixin定义混入
   通过@include使用混入

定义一个混入，通过@mixin来定义
@mixin block{
    property:value;
    property:value;
}
eg:
@mixin block{
    font-size: 12px;
    color: skyblue;
    text-align: right;
    font-weight: 800;
}
使用混入，通过@include来使用
.selector{
    @include name;
}
eg: 
.selector{
    @include block;
}

还可以通过mixin来传递参数让代码更灵活，该特性在添加浏览器前缀的时候非常有用。

//注意变量前要加上$
@mixin border-radius($radius){
    border-radius: $radius;
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}
.box{
    @include border-radius(10px);
}

当不能确定一个混入传入的参数有几个的时候，这时我们可以使用…来定义可变参数
例如，用于创建盒子阴影（box-shadow）的一个混入，可以传入任意数量的box-shadow作为参数

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

6. 继承
   使用@extend在选择器之间复用css属性
   例如，两个标题的大部分样式都一样，只是颜色有区别，这样定义一个公共的样式，然后在各自的样式里面继承公共的样式就可以了，而且在标签上写类名的时候也不用多个类选择器。

  <h3 class="tit1">Sass 变量的作用域只能在当前的层级上有效果</h3>
  <h3 class="tit2">SASS 可以通过@extend指令在选择器之间复用CSS属性</h3>
.tit{
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: center
}
.tit1{
    @extend .tit;
    color: #aaa;
}
.tit2{
    @extend .tit;
    color: #ccc;
}

7. 引用父级选择器
   使用“&”

li{
    background: #ececec;
    &:hover{
        background: #b2b2b2;
    }
}

编译后的css文件中&将被替换成嵌套外层的父选择器，如果有多层嵌套，最外层的父选择器会一层一层往下传递。

//相当于：
li:hover{
    background: #b2b2b2;
}

8. 注释
   /* */ 多行注释，会被完整输出到编译后的css
   // 单行注释，不会被编译

9. 循环
   each循环

@each $item in $list { // 其中list是 数组 ，item是数组的每一项; 
	$i: index($list,$item)  // index()函数，index（数组，每一项），返回对应这一项的索引。
	.bg#{$i}{.  //编译后.bg1,.bg2,......
		background:$item; 
	}
}  

扩展
当使用element UI等组件库时，我们通常需要改变其原有组件样式，可以选择使用 >>> 操作符。
有些像sass之类的预处理器无法正常解析 >>> ，这种情况下可以使用 /deep/ 或者 ::v-deep ,两者都是 >>> 别名，同样可以正常工作。

<style lang="scss" scoped>
  .button-box{
    ::v-deep .van-overlay{
      z-index: 100;
    }
  }
</style>