什么是 Sass 混合指令

发布时间：2023-05-26 13:32:36 所属栏目：教程来源：

导读：混合指令在 Sass 中也是一个比较常用的指令，在前面我们讲解的内容中有编写过混合指令 @mixin ，本节我们将详细讲解混合指令 @mixin 的语法包括定义混合指令和引用混合指令等等，混合指令同样非常好用，我们一起来学

混合指令在 Sass 中也是一个比较常用的指令，在前面我们讲解的内容中有编写过混合指令 @mixin ，本节我们将详细讲解混合指令 @mixin 的语法包括定义混合指令和引用混合指令等等，混合指令同样非常好用，我们一起来学习它吧。

什么是 Sass 混合指令

混合指令的出现使你可以定义在样式表中重复使用的样式，这可以使你免去编写过多重复的样式，而且在混合指令 @mixin 中你也可以做一些逻辑处理。混合指令是一个很好用的指令，它将帮你更合理的维护样式代码，学会这种方式写起样式来也很便利，下面我们开始详细的讲解它。

语法详情

混合指令的写法是 @mixin name { … } 或者 @mixin name(<arguments…>) { … }，第一种写法是不传参的指令，第二种写法是传参的指令，我们先来举个简单的例子看下混合指令的样子：

@mixin border {
border: {
width: px;
color: #cccccc;
style: solid;
}
}
上面我写的这个混合指令是一个不需要传参的，那么它怎么用呢？转换为 CSS 后是什么呢？下面我们从混合指令的定义开始逐一讲解。

定义和引用混合指令

混合指令的定义是在 @mixin 后跟指令名字和 {} ，在 {} 中你可以写一些样式，同时也可以用一些函数或者前面章节讲的控制指令，现在我们定义一个不接收参数的混合指令和一个接收参数的混合指令：

// 不接收参数的混合指令
@mixin border {
border: {
width: px;
color: #cccccc;
style: solid;
}
}
// 接收参数的混合指令
@mixin font($size: px, $weight: ) {
font: {
family: "Myfont";
weight: $weight;
size: $size;
}
}
.Box {
// 引用混合指令
@include border;
}
.item {
// 引用混合指令并传参
@include font(px, );
}
上面的代码中我们分别定义了两个简单的混合指令，然后在 .Box 和 .item 的样式中通过 @include 引用混合指令，在 @include 后直接跟混合指令的名称就可以引用了，传参如上面代码所示，那么上面这段代码将会转换为如下的 CSS 代码：

.Box {
border-width: px;
border-color: #cccccc;
border-style: solid;
}
.item {
font-family: "Myfont";
font-weight: ;
font-size: px;
}
看到转换后的 CSS 代码是不是感觉混合指令很强大，我们把指令写好后，可以在任何需要它的地方来使用，而且我们只需要传参就可以生成各种各样的样式代码。还有一点需要注意的是，在 Sass 中，@minxin 后面的名字将连字符和下划线视为是相同的！

混合指令的参数

在上面的代码中我们已经知道了混合指令是可以传参数的，参数是在指令名后面由括号括起来的变量名列表，混合指令每次调用都可以操作这些传入的参数。

这些参数只要声明了就必须传入，如果你想让某个参数成为可选的，你需要为这个参数赋一个默认值，赋默认值的方法就像变量声明赋值一样，直接在变量名后面加冒号然后跟默认值。我们举例看下：

// 没有赋默认值的参数
@mixin font-one($size, $weight) {
font: {
family: "Myfont";
weight: $weight;
size: $size;
}
}
// 赋默认值的参数
@mixin font($size: px, $weight: ) {
font: {
family: "Myfont";
weight: $weight;
size: $size;
}
}
从上面的代码中可以看出是否赋默认值的区别，默认值还可以引用前面的参数。除了默认值，在传入参数的时候我们还可以按名称传入参数，什么意思呢，我们直接举例看下：

@mixin font($size: px, $weight: ) {
font: {
family: "Myfont";
weight: $weight;
size: $size;
}
}
.item {
// 按名称传入参数
@include font-one(px, $weight: );
}
上面这段代码将会转换为如下的 CSS 代码：

.item {
font-family: "Myfont";
font-weight: ;
font-size: px;
}
按名称传入参数使我们可以更好的控制混合指令接收的参数，但这个方法还是尽量少用，因为参数名有时在多人开发的时候可能不是一成不变的！

有时候 @mixin 接收的参数个数你可能不不清楚有多少个，那么你可以将最后一个参数以 … 结尾，那么所有额外的参数都将传给该参数，然后在 @mixin 里来获取所有参数，我们举个例子直观的感受下：

@mixin fonts($s, $familys) {
font:{
size: $s;
family: $familys;
}
}
.p {
@include fonts(px, "one", "two", "three")
}
上面这段代码转换为 CSS 代码如下：

.p {
font-size: px;
font-family: "one", "two", "three";
}
除此之外，@mixin 还可以通过参数列表接收任意参数，然后通过 Meta.keywords() 这个函数来使用传入的这些参数，我们下面举例看下：

@mixin args($args) {

@each $key, $val in keywords($args) {
font: $key $val;
}
}
.p {
@include args($one: , $two: , $three: )
}
上面这个例子是为了让你更直观的看到这种传参方式，实际样式中不会这么写，上面这段代码我们通过循环 keywords() 函数返回的值来使用传入的参数，它将会被转化成如下的 CSS 代码：

.p {
font: one ;
font: two ;
font: three ;
}
混合指令在传参这块还是有挺多方式的，你可以根据实际的需求来自行选择上面的传参方式，这使得我们用起它来很灵活。

导入内容到混合指令

@mixin 指令除了可以接收参数外，还可以接收样式块，我们也称之为内容块。在 @mixin 中可以使用 @content 来声明接收的内容块，内容块是通过 {} 的方式传入的，然后会注入到 @content 所在的位置。我们举例来看下：

@mixin hover {
&:hover {
@content;
}
}
.button {
border: px solid black;
@include hover {
border-width: px;
}
}
从上面的代码我们可以看到在 @mixin 的 :hover 中我们使用 @content 来接收内容块，然后在使用这个 @mixin 的时候直接跟一个以 {} 包裹的内容块，就会到 @content 的位置，转换为 CSS 代码如下：

.button {
border: px solid black;
}
.button:hover {
border-width: px;
}
这种使用方式一般不是很常用，所以你只需要了解下就好。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!