@mixin 与 @include - 混入和引用 - scss 规则
@mixin 与 @include
Mixins允许您定义可以在整个样式表中重复使用的样式。它们可以很容易地避免使用非语义类,如.float-left
,并在库中分发样式集合。
Mixins是使用@mixi规则定义的,该规则编写为@mixin{...}
或者@mixin name(){...}
。mixin 的名称可以是任何 Sass 标识符,并且它可以包含除顶级语句之外的任何语句。它们可用于封装可放入单个样式规则中的样式;它们可以包含自己的样式规则,可以嵌套在其他规则中,或包含在样式表的顶层;或者它们可以只用于修改变量。
使用@include规则将Mixins包含到当前上下文中,该规则写为@include
或者@include()
,其中包含 mixin 的名称。
SASS 导入与 CSS 导入具有相同的语法,只是它们允许多个导入用逗号分隔,而不是要求每个导入都有自己的@import。此外,在缩进语法中,导入的 URL 不需要有引号。
scss 语法 | css 语法 |
---|---|
@mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin horizontal-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include horizontal-list; } | nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; margin-left: -2px; margin-right: 2em; } |
reset-listand
与reset_list
都指的是同一个 mixin。这是 Sass 早期的历史遗留问题,当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法,这两者就等同于使迁移更容易。参数
Mixins还可以接受参数,这允许每次调用时对其行为进行自定义。参数在@mixin名称之后的 mixin 规则中指定,作为用括号括起来的变量名称列表。然后,mixin 必须以SassScript 表达式的形式包含相同数量的参数。这些表达式的值在 mixin 的主体中作为相应的变量可用。
scss 语法 | css 语法 |
---|---|
@mixin rtl($property, $ltr-value, $rtl-value) { #{$property}: $ltr-value; [dir=rtl] & { #{$property}: $rtl-value; } } .sidebar { @include rtl(float, left, right); } | .sidebar { float: left; } [dir=rtl] .sidebar { float: right; } |
可选参数
通常,当包含 mixin 时,必须传递 mixin 声明的每个参数。但是,您可以通过定义一个默认值来使该参数成为可选参数,如果该参数未传递,则将使用该默认值。默认值使用与变量声明相同的语法:变量名,后跟一个冒号和一个SassScript 表达式。这使得定义灵活的 mixin API 变得容易,这些 API 可以以简单或复杂的方式使用。
scss 语法 | css 语法 |
---|---|
@mixin replace-text($image, $x: 50%, $y: 50%) { text-indent: -99999em; overflow: hidden; text-align: left; background: { image: $image; repeat: no-repeat; position: $x $y; } } .mail-icon { @include replace-text(url("/images/mail.svg"), 0); } | .mail-icon { text-indent: -99999em; overflow: hidden; text-align: left; background-image: url("/images/mail.svg"); background-repeat: no-repeat; background-position: 0 50%; } |
关键字参数
当包含一个 mixin 时,除了通过它们在参数列表中的位置传递它们之外,还可以通过名称传递参数。这对于具有多个可选参数的 mixin 或布尔参数特别有用,这些参数在没有名称的情况下意义不明显。关键字参数使用与变量声明和可选参数相同的语法。
scss 语法 | css 语法 |
---|---|
@mixin square($size, $radius: 0) { width: $size; height: $size; @if $radius != 0 { border-radius: $radius; } } .avatar { @include square(100px, $radius: 4px); } | .avatar { width: 100px; height: 100px; border-radius: 4px; } |
因为任何参数都可以通过名称传递,所以在命名 mixin 的参数时要小心……它可能会破坏你的用户!将旧名称作为可选参数,保留一段时间并在有人通过它时打印警告会很有帮助,因此他们知道要迁移到新参数。
接收任意参数
有时,mixin 能够接受任意数量的参数很有用。如果@mixin声明中的最后一个参数以...
结尾,则该 mixin 的所有额外参数,都将作为列表传递给该参数。此参数称为参数列表。
scss 语法 | css 语法 |
---|---|
@mixin order($height, $selectors...) { @for $i from 0 to length($selectors) { #{nth($selectors, $i + 1)} { position: absolute; height: $height; margin-top: $i * $height; } } } @include order(150px, "input.name", "input.address", "input.zip"); | input.name { position: absolute; height: 150px; margin-top: 0px; } input.address { position: absolute; height: 150px; margin-top: 150px; } input.zip { position: absolute; height: 150px; margin-top: 300px; } |
接收任意关键字参数
参数列表也可用于获取任意关键字参数。该meta.keywords()函数接受一个参数列表,并返回任何额外的关键字,这些关键字作为从参数名称(不包括$
)到这些参数值的映射传递给 mixin 。
scss 语法 | css 语法 |
---|---|
@use "sass:meta"; @mixin syntax-colors($args...) { @debug meta.keywords($args); // (string: #080, comment: #800, variable: #60b) @each $name, $color in meta.keywords($args) { pre span.stx-#{$name} { color: $color; } } } @include syntax-colors( $string: #080, $comment: #800, $variable: #60b, ) | pre span.stx-string { color: #080; } pre span.stx-comment { color: #800; } pre span.stx-variable { color: #60b; } |
传递任意参数
就像参数列表允许 mixin 接受任意位置或关键字参数一样,可以使用相同的语法将位置和关键字参数传递给 mixin。如果您传递一个列表,然后...
将其作为包含的最后一个参数,则其元素将被视为附加的位置参数。同样,后跟的映射...
,将被视为附加关键字参数。你甚至可以同时通过!
$form-selectors: "input.name", "input.address", "input.zip" !default; @include order(150px, $form-selectors...);
因为参数列表同时跟踪位置参数和关键字参数,所以可以使用它将这两个参数同时传递给另一个mixin。这使得为 mixin 定义别名变得超级容易!
@mixin btn($args...) { @warn "The btn() mixin is deprecated. Include button() instead."; @include button($args...); }
内容块
除了获取参数外,mixin 还可以获取整个样式块,称为内容块。mixin 可以通过在其主体中包含@content规则来声明它接受内容块。与 Sass 中的任何其他块一样,内容块使用花括号传递,并被注入以代替@content规则。
scss 语法 | css 语法 |
---|---|
@mixin hover { &:not([disabled]):hover { @content; } } .button { border: 1px solid black; @include hover { border-width: 2px; } } | .button { border: 1px solid black; } .button:not([disabled]):hover { border-width: 2px; } |
内容块是词法范围的,这意味着它只能看到包含 mixin 的范围内的局部变量。它看不到在它传递到的 mixin 中定义的任何变量,即使它们是在调用内容块之前定义的。
将参数传递给内容块
一个 mixin 可以通过写入@content()
将参数传递给其内容块,就像它将参数传递给另一个mixin一样。编写内容块的用户可以通过编写@includeusing()
来接受参数。内容块的参数列表就像 mixin 的参数列表一样,而@content传递给它的参数就像传递给 mixin 的参数一样。
如果 mixin 将参数传递给其内容块,则该内容块必须声明它接受这些参数。这意味着只按位置(而不是按名称)传递参数是个好主意,这意味着传递更多参数是一个重大变化。如果您想灵活地传递给内容块的信息,请考虑传递一个包含它可能需要的信息的地图!
scss 语法 | css 语法 |
---|---|
@mixin media($types...) { @each $type in $types { @media #{$type} { @content($type); } } } @include media(screen, print) using ($type) { h1 { font-size: 40px; @if $type == print { font-family: Calluna; } } } | @media screen { h1 { font-size: 40px; } } @media print { h1 { font-size: 40px; font-family: Calluna; } } |
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!