@mixin、@include

Mixin允许您定义可在整个样式表中复用的样式。这样可以有效减少.float-left这些非语义类的使用,并且可在样式库中方便的分发样式集合。

Mixins是使用@mixin定义的,它被写为@mixin <name>{ ... }@mixin name(<arguments...>){ ... }。mixin的名称可以是任何Sass标识符,它可以包含除顶级语句之外的任何语句。它们可以用来封装可以放入单个样式规则中的样式;它们可以包含自己的样式规则,可以嵌套在其他规则中,也可以包含在样式表的顶层;或者它们只是用来修改变量。

使用@include把mixin包含到当前上下文中,该规则的写法是@include <name>@include <name>(<arguments...>),其中包含mixin的名称。

与所有Sass标识符一样,mixin名称将连字符和下划线视为相同的。这意味着reset-listreset_list都引用相同的mixin。这是Sass早期的历史遗留问题,当时它只允许在标识符名称中使用下划线。一旦Sass添加了对连字符的支持来匹配CSS的语法,这两种方法就等价了,从而使迁移更加容易。

参数

mixin还可以接受参数,这允许每次调用它们时定制它们的行为。参数在mixin的名称后面的@mixin规则中指定,由圆括号包围的变量名称列表。然后,mixin必须以SassScript表达式的形式包含相同数量的参数。这些表达式的值在mixin的主体中作为相应的变量可用。

参数列表后面也可以有逗号!这可以使重构样式表时更容易避免语法错误。

可选参数

通常,当包含mixin时,必须传递mixin声明的每个参数。但是,您可以通过定义一个默认值来使参数成为可选的,如果没有传递该参数,则将使用该默认值。默认值使用与变量声明相同的语法:变量名,后跟冒号和SassScript表达式。这使得定义灵活的mixin API变得很容易,这些API可以以简单或复杂的方式使用。

默认值可以是任何SassScript表达式,它们甚至可以引用前面的参数!

带键名的参数

当包含mixin时,除了按参数列表中的位置传递参数外,还可以按键名传递参数。这对于具有多个可选参数的mixin,或具有布尔参数的mixin尤其有用。关键字参数使用与变量声明可选参数相同的语法。

因为任何参数都可以通过键名传递,所以在重命名mixin的参数时要小心,它可能会影响到使用的用户!将旧名称作为可选参数保留一段时间,并在有人传递时打印警告,这样他们就知道要迁移到新参数,这是很有帮助的。

不定参数

有时候,mixin能够接受任意数量的参数是很有用的。如果@mixin声明中的最后一个参数以...结尾,则传入的额外参数将被视为一个列表。这种参数称为参数列表

不定键名参数

参数列表还可以用于接受不定键名参数。keywords接受一个参数列表,并返回这些额外的关键字参数的map,其中键名不包含$,传递给mixin。

如果您没有将参数列表传递给keywords(),则该参数列表将不允许额外的关键字参数。这可以帮助mixin的调用者确保他们的参数名称中没有出现任何拼写错误。

传递不定参数

就像参数列表允许mixin接受任意位置或关键字参数一样,可以使用相同的语法将位置和关键字参数传递给mixin。如果你传递一个后面跟着...@include的最后一个参数,它的元素将被视为附加的位置参数。类似地,map后面跟着...将被视为附加的关键字参数。你甚至可以一次把它们否传递过去!

因为参数列表同时跟踪位置参数和关键字参数,所以可以使用它同时将这两个参数传递给另一个mixin。这使得为mixin定义别名变得超级容易!

内容块

除了接受参数外,mixin还可以接受整个样式块,称为内容块。mixin可以通过在其主体中包含@content来声明它接受一个内容块。与Sass中的任何其他块一样,使用大括号传递内容块,并将它注入到@content规则中。

mixin可以包含多个@content。如果是这样,则将为每个@content单独包含内容块。

内容块是一个词法作用域,这意味着它只能在包含mixin的作用域中访问到本地变量。即使在调用内容块之前定义了变量,它也不能看到在传递给mixin中定义的任何变量。

传递参数给内容块

兼容性:Dart Sass 1.15.0+ |LibSass ✗|Ruby Sass ✗

mixin可以通过@content(<arguments...>)将参数传递给它的内容块,就像它将参数传递给另一个mixin一样。编写内容块的用户可以通过@include <name> using (<arguments...>)来接受参数。内容块的参数列表工作起来就像mixin的参数列表一样,@content传递给它的参数工作起来就像传递参数给mixin一样。

如果mixin将参数传递给它的内容块,该内容块必须声明它接受这些参数。这意味着只通过位置(而不是名称)传递参数是一个好主意,这意味着传递更多的参数是一个破坏性的更改。

如果您想灵活地传递什么信息给内容块,请考虑传递包含它可能需要的信息的(map)[/api/Values/Maps]!

缩进Mixin语法

缩进语法除了标准的@mixin@include之外,还有一个用于定义和使用mixin的特殊语法。mixin使用字符=定义,并使用+包含它们。虽然这种语法更简洁,但也更难以理解,建议用户避免使用。

上次更新: 2019-11-5 4:49:11 PM