• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： scss 中文手册 -> scss 规则

    @mixin 与 @include

    Mixins允许您定义可以在整个样式表中重复使用的样式。它们可以很容易地避免使用非语义类，如.float-left，并在库中分发样式集合。

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

    使用@include规则将Mixins包含到当前上下文中，该规则写为@include<name>或者@include<name>(<arguments...>)，其中包含 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;
}
    Mixin 名称和所有 Sass 标识符一样，将连字符和下划线视为相同。这意味着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%;
}
    默认值可以是任何SassScript表达式，它们甚至可以引用早期参数！


    关键字参数

    当包含一个 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;
}
    如果您从未将参数列表传递给meta.keywords()函数，则该参数列表将不允许额外的关键字参数。这有助于你的 mixin 的调用者，确保他们没有意外拼错任何参数名称。


    传递任意参数

    就像参数列表允许 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 可以包含多个@content规则。如果有，则内容块将分别包含在每个@content中。
    ⚠️注意！
    内容块是词法范围的，这意味着它只能看到包含 mixin 的范围内的局部变量。它看不到在它传递到的 mixin 中定义的任何变量，即使它们是在调用内容块之前定义的。


    将参数传递给内容块

    一个 mixin 可以通过写入@content(<arguments…>)将参数传递给其内容块，就像它将参数传递给另一个mixin一样。编写内容块的用户可以通过编写@include<name>using(<arguments…>)来接受参数。内容块的参数列表就像 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;
  }
}

    上篇：@import

    下篇：@function