Sass 中的混合( Mixin )

有关 Sass 的文章已经更新过一段时间了,今天和大家一起看的则是 Sass 中的一个特性,那就是混合( Mixin )。混合组件允许你定义的样式,可以重新使用在样式表,而无需诉诸非语义类。混合组件也可以包含完整的 CSS 规则,和其他任何一个地方允许 Sass 文档。他们甚至可以带参数,可以让你用很少的混合生产各种款式。

Demo 下载地址: https://github.com/iq9891/learn-sass.git

关于 Sass 中的混合,您可以通过在终端中运行以下命令来安装我们将在本教程中使用的应用进程。

1
2
3
4
cd /path/to/your/projects
git clone -b mixin https://github.com/iq9891/learn-sass.git

定义一个 Mixin

mixindefining.scss
1
2
3
4
5
6
7
@mixin setFont {
font: {
family: '微软雅黑';
size: 5px;
weight: bold;
}
}

使用一个 Mixin

mixinincluding.scss
1
2
3
4
5
6
//引用一个 Sass 文档
@import "mixindefining.scss";
//用 @include 使用一个 Mixin
.myTitle {
@include setFont;
}

被编译为:

mixinincluding.css
1
2
3
4
5
.myTitle {
font-family: '微软雅黑';
font-size: 5px;
font-weight: bold;
}

向 Mixin 中传参数

定义一个 Mixin 时,参数写入变量名之间用逗号分隔,所有后面括号中的名字。随后 Mixin 包括时,值可以通过在以同样的方式。例如:

mixinarguments.scss
1
2
3
4
5
6
7
8
@mixin setSize($width, $height) {
height: $height;
width: $width;
}
//用 @include 使用一个 Mixin
p {
@include setSize(10px, 10px);
}

被编译为:

mixinarguments.css
1
2
3
4
p {
height: 10px;
width: 10px;
}

Mixins 还可以使用正常的变量设置语法为其参数指定默认值。然后当包含 Mixins 时,如果它不传递参数,将使用默认值。例如:

mixinarguments.scss
1
2
3
4
5
6
7
8
9
10
11
@mixin setColor($color: blue) {
color: $color;
}
h1 {
@include setColor(red);
}
div {
@include setColor();
}

被编译为:

mixinarguments.css
1
2
3
4
5
6
7
h1 {
color: red;
}
div {
color: blue;
}

向 Mixin 中可变参数

有时候在编写混合(mixin)的时候,遇到的参数是不详的,不知道有多少,不知道应该设多少才好。具体使用的例子如下:

mixinarguments.scss
1
2
3
4
5
6
7
8
9
@mixin boxShadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.boxShadow {
@include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
}

被编译为:

mixinarguments.css
1
2
3
4
5
.boxShadow {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Mixin 中的内容可以包含很多东西,不仅是包含属性,也可以包含整个组件。我认为 Mixin 可以算得上是 Sass 中的代码块。

通过以上介绍,想必大家已经知道了 Sass 中的混合( Mixin )是怎么回事了吧。如果你对 Sass 就此产生了浓厚的兴趣,那么还请翻看本博客其他关于 Sass 的文章吧。

转载请注明出处:https://iq9891.github.io/2017/02/11/sass/sassmixin/

本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。

如有任何建议或疑问,欢迎留言讨论。

如果觉得文章不错的话,欢迎点一下分享。