SASS

原生css的不便

书写重复的选择器
修改css样式，不能达到一处改处处改
css书写重复
结构不明确

基本概念

sass是一个css预处理器，可以为网站启用可定义、可管理和可重用的样式表。sass是一个动态样式表语言，扩展了css的功能。
- css预处理是一种脚本语言，可扩展css并将其编译为常规css语法，以便浏览器读取。
- sass提供了嵌套、变量、数学运算、混合、循环等等，为了提高css代码的编写的效率
目标：能够极大提高编写css代码的速率，提高开发速率

基本使用

使用vscode 中的`easy sass`插件来使用

利用vscode按照easy sass插件（支持将sass文件编译为css文件）
新建以.scss或者.sass为后缀名的文件，在里面书写sass代码
- .sass是旧版本的sass文件格式
- .scss是新版本的sass文件格式
easy sass插件可以将编写好的sass文件自动转为css文件，在页面中直接引入css文件即可

手动自动编译的css文件的文件保存路径

设置——easy sass——target DIr更改路径
注意：路径是配置在vscode中，所以是从工作区出发

嵌套

sass支持选择器里面嵌套子选择器
作用：让css代码层级结构清晰明了，不会出现父子标签之间的权重问题。

语法：

父选择器{
    css代码；
    子选择器{
        css代码；
    }
}

例子：
header{
    width: 100%;
    height: 80px;
    nav{
        width: 500px;
        height: 80px;
        background-color: red;
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            >li{
                width: 100px;
                height: 80px;
                // &代表父选择器
                &:hover{
                    color: red;
                }
                &::before{
                    content: 'before';
                }
                &::after{
                    content: "after";
                }
            }
            +div{
                background-color: green;
            }
            ~div{
                width: 100px;
            }
        }
    }
}
编译后的css代码：
header {
  width: 100%;
  height: 80px;
}

header nav {
  width: 500px;
  height: 80px;
  background-color: red;
}

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

header nav ul > li {
  width: 100px;
  height: 80px;
}

header nav ul > li:hover {
  color: red;
}

header nav ul > li::before {
  content: 'before';
}

header nav ul > li::after {
  content: "after";
}

header nav ul + div {
  background-color: green;
}

header nav ul ~ div {
  width: 100px;
}

变量

变量可以看作一个容器，存放一些数据，可以在代码中重复使用
变量需要先定义，再使用
语法：
```
定义变量
$变量名:  变量值；
```
- 变量值可以是css属性的属性值，比如：100px，red，还可以是复合属性的属性值：1px solid red
- 变量的命名
  - 变量名可以包含数字、字母、_和-
  - 不能以数字开头，不能包含特殊符号
  - 多个单词之间尽量使用-连接
注意：
- 一般在文件开始部分定义变量，那么文件任意位置都可以使用