sass中@mixin与 @include

@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);
}
相关推荐
超级大只老咪13 分钟前
HTML学习路线
前端·学习·html
゜ eVer ㄨ15 分钟前
React学习第三天——生命周期
前端·学习·react.js
摆烂且佛系18 分钟前
CSS元素的总宽度计算规则
前端·css
对岸住着星星22 分钟前
vue3+ts实现拖拽缩放,全屏
前端·javascript
aesthetician32 分钟前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
Nan_Shu_6141 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店1 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖1 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒1 小时前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser1 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel