一、变量

1. 局部变量

2. 全局变量：变量$color 后加 !gloabl（块里定义，外部也可以使用

3. 变量默认值：$fontsize: 14px !default; !default

4. 多值变量
   1.定义：$paddings: 5px 10px 5px 10px 使用：padding-left: nth($paddings, 1) 序号从 1开始
   2.定义：$maps: (color: red, borderColor: blue)使用：background-color: map-get($maps, color)

5. 变量特殊用法 定义：$className: main 使用：.#{$className}

二、样式引入（部分）

文件要以_开头
要是引入该部分内容 可以在文件中@import文件名即可（不需要写下划线和后缀）

三、嵌套

1. @at-root为跳出嵌套
2. 如果是媒体查询 是不能跳出的，如果想要跳出，就添加without: media

//原代码
 @media screen and (max-width: 600px) {
      @at-root .container {
          Background: green;
      }
}
//跳出媒体查询
@media screen and (max-width: 600px) {
    @at-root (without: media rule) {
        .container {
            Background: green;
        }
    } 
}

3. @at-root 与 & 如果想要写某个区域下的该类名的样式 可以使用这个形式

@at-root .text-info {
    color: red;
    @at-root nav & {
        color: blue; 
     }
 }

四、继承

1. 承多个样式 可以使用@extend类名, 类名;
2. 链式继承 子继承父 孙子继承父 形成链条；
3. 继承的局限性：包含选择器(.one .two)以及相邻兄弟选择器（.one + .two）是无法继承的；若一个元素除了有自身属性，还有hover 属性，其hover属性也会被继承。
4. 继承的交叉合并

.one a {
  Font-weight: bold;
}
.two .three {
  @extend a;
}