sass基本事项
# css 缺点
大量重复代码
嵌套
维护
# sass css预处理语言
# sass的后缀是 .scss 他不能直接在页面引入
需要进行编译 把scss文件编译成css文件，才能正常在页面使用（css）
编译可以使用 ruby， 也可以使用vscode的插件 easy sass
sass常见语法
1 嵌套 ：
后代选择器
子代选择器
群组选择器
.header {
height: 100px;
background-color: #fff;
ul {
height: 200px;
}
> p {
font-size: 12px;
}
span,
strong {
font-size: 16px;
}
}
2 &表示父级元素的意思
.a {
background-color: red;
&:hover {
background-color: yellow;
}
// 这个是a标签本身触碰变色
:hover {
background-color: aquamarine;
}
// a后面所有的元素触碰变色
}
3 变量的使用：
变量使用$符号进行声明，有作用域 不区分中划线和下划线
接受算术运算符的写法 $a/2 === 200px/2 */
$wj: 200px;
.b {
height: $wj;
span {
height: $wj/2;
}
}
4 引入文件
@import '文件名' 可以省略后缀（.scss）
@import url(); 两者有区别的
@import "import";
5 混入函数
声明的时候@mixin name(形参--变量) 使用@include name(实参)
注意：name不区分中划线和下划线，有参数就加括号，没有参数就不用加括号
@mixin wj {
height: 300px;
width: 300px;
}
@mixin wj2(b) {
height: $a;
width: $b;
}
.hanshu {
@include wj;
ul {
@include wj2(200px, 200px);
}
}
6继承---继承某个选择器的样式
@extend 选择器的名字
.beex {
height: 300px;
}
// 继承谁的就和谁一起显示
.extend {
@extend .beex;
color: red;
}
sass使用注意事项
1 重复的地方可以使用单独的文件（header.scss footer.scss reset.scss）
2 scss千万不能删除 ---方便后期维护
3 scss编译出来的css不能单独修改---修改过后还是会被scss覆盖
4 出现错误会直接VScode跳出报错，successfully表示编译成功
