scss 语法

scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。

1. 选着器嵌套

nav {
	ul {
	margin:0;
	}
}

2. $ 定义变量与使用

$font-stack: Helvetica, sans-serif;
$primary-color:#333

body {
font: 100% $font-stack;
color: $primary-colorl
}

3. @mixin 定义函数, @include 调用

# theme: 函数名
# arg: 函数参数
# DarkGray: 默认值
@mixin theme($arg: DarkGray){
backgroundz:$arg;
}
# 调用
.info {
@include theme;
}
.alert {
@include theme($arg:DarkRed);
}

4. % 基类 -> @extend 扩展

# 定义 %equal-heights 基类
%equal-heights{
display:flex;
}
# 使用
.message{
@extend %equal-heights；
background:#333;
}

5. @use "sass:math"; -> + - * math.dev() %

@use "sass:math";
.container{
display:flex;
}
article[role="main"] {
width:math.div(600px,960px)*100%;
}

6. 引用 @import 引入其他文件以_开头的文件

# 引入 _base.scss 文件， _base.scss本身不能生成css文件
@import 'base' 
.inverse {
background-color: base.$primary-color;
}

参考：

• bilibili Sass入门基础+实战，真是好东西