【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随机画出小方块组成星空
【SCSS变量】$ | & | var | @for | @include | @function | @each 等常用方法使用_第1张图片

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

你可能感兴趣的:(scss,前端,css)