1. SCSS

css 是一种脚本语言，没有动态语言特征
css 语法不够强大，没有变量和合理的样式服用机制，导致难以维护
我们需要使用动态的样式语言，赋予 css 新的特性

常见的动态样式语言

scss/sass(scss 兼容 sass，scss 跟接近 css 语法)
stylus
less

1.1. scss 的功能

scss 是一款强化 css 的辅助工具
它和 css 语法很象，在 css 的基础上增加了变量，嵌套，混合，导入，函数等高级功能。这些扩展，让 css 更加的强大优雅

scss 运行在服务端
浏览器不认识 .scss 文件，需要转换成 .css 才能被浏览器解析执行

1.2. scss 的使用

scss 是在服务端使用

安装 nodejs 的解析器 v8.11.1 以上
在线安装 cmd 控制台输入 npm install -g node-sass
无网安装把安装包中的文件，复制到 nodejs 安装目录下

:::tip cmd 中输入 node-sass -v 检查版本号打印出版本号，就是成功 :::

1.3. scss 文价转换成 css 文件

单文件转换

在项目目录下，按住 shift，右键打开 powershell
输入 node-sass  scss/01.scss   css//01.css
要转换的scss文件   转换后的css文件

对文件转换

node-sass scss -o css
node-sass  scss文件夹名称  -o  css文件夹名称

单文件的监听

node-sass -w scss/01.scss css/01.css
开启一个监听，注视这 01.scss 文件
一旦这个文件保存,自动转换成 01.css文件

多文件监听
```
node-sass -w scss -o css
```

1.4. scss 基础语法

1.5. 变量

使用 $ 符号创建变量，变量名可以包含 - _ 命名规则基本与 css 选择器相同，尽量做到见名知意

:::warning
注意:

变量声明时，可以引用其它变量
变量如果声明在 {} 内，就只能在这个 {} 内使用
!default 规则
- 如果此变量之前声明过值，就使用之前声明的变量
- 如果此变量之前没有声明过值，就是用现在的值
- $jd_red: red !default; :::

1.6. 嵌套

后代选择器的嵌套写法

伪类选择器的嵌套

.mybtn {
&:hover{}
}
// 嵌套需要 & 占位符，如果没有占位符，选择器和伪类选择器之间会多一个空格，导致选择器整个失效

群组的嵌套
```
nav, div, h1 {
a {
  color: #fff;
}
}
```

属性的嵌套

div {
border: {
  style: solid; 
  width: 10px; 
  color: #fff
};
}

1.7. 导入

在 scss 语法中。如果 scss 文件，以下划线，那么这个 scss 就别称为局部 scss 文件

局部 scss 文件的特点 :::tip
每一个局部 scss 文件，就是一个小模块
scss 在转换 css 的时候，不会转换局部 scss 文件
我们一般会在全局 scss 文件中，导入局部 scss 文件
导入的语法 @import 局部 scss 文件名称(不带下划线，不带后缀名)这样生成一个统一的 css 文件
导入局部 scss 中的变量，可以在被导入的文件中使用 :::

1.8. 混合器

:::tip 把多个选择器都会用到的样式，封装进一个混合器中
需要使用的时候，调用混合器，实现代码的重用

声明混合器 @mixin 混合器名称(参数1, 参数2,....) {样式}

调用混合器 @include 混合器名称(实参1, 实参2,...) :::

:::warning 注意: 混合器使用最多的场合，css hack :::

1.9. 继承

:::tip 一个选择器，可以完全使用另外一个选择器的样式使用关键字 @extend 选择器名; 继承样式 :::

1.10. 运算符 + - * / %

scss 可以自动在几种单位之间转换数值前提是，单位可以转换 rem em %就不能转换

加法 :::tip 字符串拼接的时候，如果使用有双引号的 + 无双引号的，结果有双引号
如果使用无双引号 + 又双引号，结果无双引号 :::
减号 :::tip 减号会被自动解析为变量的一部分所以 scss 中减法，要前后加空格 :::
除法 :::tip scss 中 / 的作用，除法，分隔符
在 scss 中，以下情况会被认为是除法
如果运算符两边的数字是变量或者函数的返回值
运算式被小括号包裹，是除法
除法运算式，是其它算术运算的一部分 :::

字符串的插值操作

content: "liangliang ate #{200 + 100} baozis"
#{} 做插值

颜色运算

// 分段运算
#rrggbb + #rrggbb = #rr+rr  gg+gg  bb+bb
rgb(a,b,c) + rgb(d,e,f) = rgb(a+b, b+e, c+f)
rgba //的算法
  // 计算两个 rgba 的时候，要求 alpha 必须相等，才能运算

1.11. 内置函数

// scss 定义了很多函数，有些函数直接可以在 css 语句中使用

// 1. rgba 就是 scss 函数
  hsl(hue, saturation, lightness)
  hue 色调 0~360  0~120  120~240  240~360
  saturation 饱和度 0~100%
  lightness 亮度    0~100%

// 2. 数学函数
  round($val) // 四舍五入
  ceil($val)  // 向上取整
  floor($val) // 向下取整
  min($v1, v2...) // 最小值
  max($v1, $v2..) // 最大值
  random()  // 随机数

// 3. 字符串函数
  unquote($str) // 去掉 $str 的引号
  quote($str)   // 加上 $str 的引号
  to-upper-case("abc") // 变大写
  to-lower-case("ABC") // 变小写

// 4. 自定义函数
  @function get-width($a, $b) {
    @return min($a, $b);
  }

// 关键字 function return 加 @ 参数加 $

1.12. 指令

@if ($type == sum) {
    color: red;
} @else if ($type == moon) {
    color: blue;
} @else {
    color: orange;
}

// 条件的小括号，可加，可以不加

SCSS