【SCSS变量】$ | | var | @for | @include | @function | @each 等常用方法使用

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> 必须是整数值。

用法一：

@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'); 
}