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

SCSS优点：编写清晰、无冗余、语义化的CSS，减少不必要的重复工作

• 1、变量声明（`$`）和使用
• 2、使用 `&` 代替父元素
• 3、在HTML中使用 `:style={'--name': 动态值}`自定义属性，在SCSS中用`var(--name)`函数绑定动态变量值，
• 4、混合器（`@mixin`）和使用（`@include`）
• 5、给混合器（`@mixin`）定义参数，并使用（`@include`）传参
• 6、使用 （`@extend`）继承 公共类（元素名、.class）
• 7、使用 `@function` 和 `@for` 循环语句
• 8、使用 `@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'); 
}