<font style="color:rgb(51, 51, 51);">Sass </font>

1、变量

$highlight-color: #F90;

******css规则块内**

// 声明变量
$nav-color: #F90;
// 使用
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

2、导入scss

````import "~@/"语法来指向src目录

3.1 父选择器嵌套子选择器

.parent {
  .son{
    
  }
}

3.2

最常见与hover伪元素

.parent {
  .son{
    &:hover{
      color: red
    }
  }
}

3.3 嵌套属性

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

4、静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器@mixin

继承@extend