前言
最近写sass遇到一些问题，正好重新复习一遍sass。阅读sass官方中文网结合自己的理解对sass做一个简单的梳理。 sass官方中文网：
一 变量
1. 变量的声明与使用
方法1：变量可以在css规则块定义之外存在
$highlight-color: #F90;
.aaa {
width: 100px;
height: 100px;
background-color: $highlight-color;
}
方法2：当变量定义在css规则块内，那么该变量只能在此规则块内使用
.aaa {
$highlight-color: #F90;
width: 100px;
height: 100px;
background-color: $highlight-color;
}
.ccc {
width: 100px;
height: 100px;
background-color: $highlight-color; //这里会报错，提示没有定义变量$highlight-color
}
2. 变量命名中的下划线与中划线是相同的
.aaa {
$highlight-color: pink;
width: 100px;
height: 100px;
background-color: $highlight_color; // 用下划线连接但仍然生效
}
实际上，在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。
二 嵌套规则
1. 选择器与属性嵌套
sass一个很基础，很强大的功能就是支持选择器的嵌套
选择器嵌套：
.aaa {
width: 100px;
height: 100px;
.bbb {
width: 50px;
height: 50px;
background-color: red;
}
}
以上代码会编译成：
.aaa .bbb {
width: 50px;
height: 50px;
background-color: red;
}
属性嵌套：相同属性的前缀提取出来，不同部分写在{}
.a{
border: 10px solid #ccc {
radius: 50%;
}
}
编译成
.a{
border: 10px solid #ccc;
border-radius: 50%;
}
2.父选择器标识符——&
使用“&”标识符代表父元素
.AAA{
.aaa {
width: 100px;
height: 100px;
& .bbb { // 这里要注意在用类或ID选择器等，&符号与元素之间要有空格，否则不生效
width: 50px;
height: 50px;
background-color: red;
}
}
}
.bbb编译后
.AAA .aaa .bbb{
width: 50px;
height: 50px;
background-color: red;
}
常常在用伪类选择器中会使用&符号，否则伪类选择器不生效
width: 100px;
height: 100px;
&:hover { //注意在伪类选择器中会使用&符号，&符号与元素之间不要有空格，否则不生效。这与上面那种情况正好相反
background-color: orange;
}
问：经常会忘记&符号后面要不要加空格。&标识符后面到底要不要加空格呢？ 答：伪类选择器不要加空格，其它的要加空格。
3.sass中>,+,~的标识符的使用
">" 指元素中嵌套的所匹配的元素
.a > .b
<div class="a">
<div class="b"></div> 生效
<div class="b"></div> 生效
<div class="aaa">
<div class="b"></div> 不生效
</div>
<div class="b"></div> 生效
</div>
"+"指下方紧邻的匹配的元素
.a > .b 表示只有.a的下方紧邻的.b样式生效，其它.b都不生效
<div class="b"></div> 不生效
<div class="a"></div>
<div class="b"></div> 生效
<div class="b"></div> 不生效
"~"指下方所有匹配的元素
.a ~ .b
<div class="b"></div> 不生效
<div class="a"></div>
<div class="b"></div> 生效
<div class="b"></div> 生效
<div class="b"></div> 生效
三 导入sass文件
1.如何导入其它sass文件
@import 'a';
注意：
一定记得要在句子末尾加上分号
导入sass文件时可以省略文件的后缀名.scss
如果想导入css.文件，那么后缀名.css就不可删除
如果有一个.css文件，想要将其用.sass方式导入。那么直接将.css后缀名改成.sass就可以了
与变量类似，@import 'a';可以放在文件的开头，也可以放在代码块中。
.aaa {
@import 'a';
width: 100px;
height: 100px;
background-color: $aaa;
}
与放在代码块中的作用域不同。经过测试，发现文件全局都可以使用引入进来的变量。我猜测应该在加载时有个预编译过程，提前编译了引入的sass文件并将它置于文件的开头
2.使用sass部分文件
那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。此约定即，sass局部文件的文件名以下划线开头。 如:_a.scss
而且在引用时也可以省略_。
@import 'a';
但个人觉得尽量不需要，会有歧义。
3.默认变量值
在sass文件可以用!default来修饰变量，即给变量添加一个默认值
a.sass
$bgc: red !default;
b.sass
@import './a';
$bgc:blue;
.aaa {
background-color: $bgc; // $bgc--> blue
}
当引用这个sass文件时，如果重新给变量$bgc赋值那么，就会用重新赋的值。 这个就相当于函数的形参赋值一个默认值
四 混合器
1.混合器的使用
将一组样式的功能代码放在一起，起一个名字。可以方便的被其它文件引用。就像类中的方法一样。 比如一个样式功能，文字超过一定长度变成省略号
.a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
用@mixin 名字格式将其变成一个混合器
@mixin text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
使用的时候先导入scss文件再用@include
@import 'mixin';
.a {
@include text-overflow;
}
2.混合器传参
形参名字必须以$开头，否则报错
@mixin text-overflow($a, $b, $c) {
overflow: $a;
text-overflow: $b;
white-space: $c;
}
使用的时候可以有多种形式。
形式1：这种是清楚形参顺序的，按照形参顺序依次对应写上即可
.a {
@include text-overflow(hidden, ellipsis, nowrap);
}
形式2：这种就不需要关心形参顺序
.a {
@include text-overflow($a: hidden, $b: ellipsis, $c: nowrap);
}
形式3：用变量传参
$aaa: hidden;
$bbb: ellipsis;
$ccc: nowrap;
.a {
@include text-overflow($a: $aaa, $b: $bbb, $c: $ccc);
}
3.混合器参数默认值
@mixin text-overflow($a: hidden, $b: ellipsis, $c: nowrap) {
overflow: $a;
text-overflow: $b;
white-space: $c;
}
@import '@/infra/assets/css/mixin.scss';
.a {
@include text-overflow;
}
五.继承
1.使用
在sass中使用继承需要用到 @extend 标识符。
.b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.a {
@extend .b;
}
2.与“，”标识符的区别
继承和用逗号的形式写，好像没什么分别了吗？看似都能达到同样效果
.b , .a{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
不同点1：
@extend还可以继承与.b有关联的其它样式
比如：
.b {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
text-align: center;
.c {
width: 50px;
height: 50px;
background-color: #f00;
}
}
.b.d {
width: 20px;
height: 20px;
background-color: pink;
}
这些样式都会被.a继承下来.而“，”就不能让.a使用与.b有关联的其它样式
不同点2：
.a @extend .b 能让.a在继承.b的同时也能够有自己的样式。
.a {
@extend .b;
color:#f6f6f6;
}
而“，”就让双方完全一样了，当然也可以在另外给.b或.a单独设置样式。可是@extend不仅更简练而且逻辑也清晰
3.@extend使用注意
通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。但是如果你不小心，可能会让生成的css中包含大量的选择器复制，反而会使用太多的空间。
在使用@extend时，不要用后代选择器去继承。也就是说 .foo .bar { @extend .baz; } 这种情况是不被允许的。
