📌  相关文章
📜  SASS mixins

📅  最后修改于: 2020-12-25 04:14:03             🧑  作者: Mango

无礼的混蛋

Sass Mixins可帮助您制作要在站点上重复使用的CSS声明组。您甚至可以根据需要传递值，以使混合更灵活。

mixin可以存储多个值或参数以及调用函数，以避免编写重复的代码。 Mixin名称可以互换使用下划线和连字符。

让我们以边界半径为例。此示例指定如何在边界半径中使用mixin以在您的网站中重复使用它。

SCSS语法：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box { @include border-radius(10px); }

等效的Sass语法：

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius
.box
  +border-radius(10px)

在这里，我们使用mixin指令，并给它命名为border-radius。括号内使用变量$ radius根据或需要传递半径。创建mixin之后，您可以将其用作CSS声明。它以@include开头，后跟mixin的名称。生成的CSS将如下所示：

CSS语法：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Mixin中存在的指令

Mixin中存在的指令列表：

Index Directive Description
1. Defining a mixin The @mixin directive is used to define the mixin.
2. Including a mixin The @include directive is used to include the mixins in the document.
3. Arguments Argments are the SassScript values that can be taken in mixins at the time when mixin is included and available as variable .
4. Passing content blocks to a mixin It specifies block of styles passed to the mixin.