sass中@mixin与 @include

小王码农记2025-07-27 22:05

@mixin与 @include

一、定义与使用混入
二、混入中也可以包含混入
三、向混入传递变量
- 定于带变量的混入
- 使用带变量的混入
四、混入变量可变参数
- 定义可变参数混入
- 使用可变参数混入

定义混入@mixin与使用混入@include。

一、定义与使用混入

定义混入语法：

bash 复制代码

@mixin mixin-name样式名 {
	//...各属性
}

使用混入语法：

bash 复制代码

selector { 
	@include mixin-name
}

定义与使用混入demo

bash 复制代码

// 定义混入demo:
@mixin important-text {
	color: red;
  	font-size: 25px;
 	 font-weight: bold;
  	border: 1px solid blue;
}

//使用混入：	
.danger {
	@include important-text;
	background-color: red;
}

上面代码转为css代码为：

bash 复制代码

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

二、混入中也可以包含混入

bash 复制代码

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

三、向混入传递变量

定于带变量的混入

bash 复制代码

@mixin bordered($color, $width) {
	border: $width solid $color;
}

使用带变量的混入

bash 复制代码

.myArticle {
  @include bordered(blue, 1px);
}

四、混入变量可变参数

当不能确定一个混入或者一个函数的参数个数，就可使用...来设置可变参数。

定义可变参数混入

bash 复制代码

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

使用可变参数混入

bash 复制代码

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}