1、变量声明（$）和使用
// 用`$`声明变量
$color: red;
// 直接使用变量
span{ color: $color; }
p{ background: $color; }
2、使用 & 代替父元素
a{
color: red;
&:hover{
color: green;
}
}
3、在HTML中使用 :style={'--name': 动态值}自定义属性，在SCSS中用var(--name)函数绑定动态变量值，
<p v-for="(item, index) in dataList" :key="index" :style="{'--color': item.color}" >{{item.name}}</p>
p{
color: var(--color);
}
data() {
return {
dataList: [
{name: '红色', color: 'red'},
{name: '蓝色', color: 'blue'},
{name: '绿色', color: 'green'}
]
}
}
4、混合器（@mixin）和使用（@include）
// @mixin声明混合器: 圆角边框
@mixin round-radius{
border-radius: 10px;
background: red;
}
// 使用@include 混入一段重用样式的代码
p{
width: 200px;
height: 100px;
@include round-radius; // @include 使用变量
}
5、给混合器（@mixin）定义参数，并使用（@include）传参
// @mixin声明混合器: a不同状态的颜色参数
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
// @include 使用变量，并传入实际参数
a {
@include link-colors(blue, red, green);
}
//Sass编译后最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
6、使用 （@extend）继承 公共类（元素名、.class）
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error; // 继承
border-width: 3px;
}
7、使用 @function 和 @for 循环语句
@for 指令可在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。
包含两种格式：
@for $var from <start> through <end> 代表 [ start, end ]
@for $var from <start> to <end> 代表 [ start, end }，不包含end
另外，$var 可以是任何变量，如 $i；<start> 和 <end> 必须是整数值。
AI写代码
用法一：
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
// 编译为：
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
用法二：
// 使用scss随机添加 box-shadow,参数 n = 个数，range = 范围
@function multiple-box-shadow($n, $range) {
$value: '#{random($range)}px #{random($range)}px #FFF';
@for $i from 1 through $n {
$value: '#{$value} , #{random($range)}px #{random($range)}px #FFF';
}
@return unquote($value); // 去掉''引号
}
#stars {
width: 1px;
height: 1px;
box-shadow: multiple-box-shadow(700, 2000);
}
利用box-shadow随机画出小方块组成星空
8、使用 @each 循环
@each $color in red, blue, green{
.#{$color}-icon {
background-image: url('/images/#{$color}.png');
}
}
// 编译为：
.red-icon {
background-image: url('/images/red.png');
}
.blue-icon {
background-image: url('/images/blue.png');
}
.green-icon {
background-image: url('/images/green.png');
}
