百科狗@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
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
