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);
}
相关推荐
Sammyyyyy6 分钟前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮17 分钟前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J23 分钟前
webpack笔记
前端·笔记·webpack
Baklib梅梅42 分钟前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒1 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端
Bling_Bling_11 小时前
面试常考:js中 Map和 Object 的区别
开发语言·前端·javascript
前端小巷子1 小时前
JS实现丝滑文字滚动
前端·javascript·面试
oil欧哟1 小时前
🧐 我用 Vibe Coding 从 0 到 1 打造 AI 产品,上线一个月效果如何?有什么心得?
前端·产品·vibecoding
霍克itxt点top2 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端
xiguolangzi2 小时前
1panel web服务部署
前端