Sass @mixin και @include

Sass Mixin

@mixin instructions allow you to create CSS code that can be reused throughout the entire website.

create @include instructions are used to allow you to use (reference) mixin.

define Mixin

mixin is defined using @mixin defined by instructions.

Sass @mixin 语法：

@mixin name {
  property: value;
  property: value;
  ...
{}

下例创建名为 "important-text" 的 mixin：

Γραμματική SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
{}

提示：

关于 Sass 中连字符和下划线的提示：连字符和下划线被认为是相同的。

这意味着 @mixin important-text { } 和 @mixin important_text { } 被认为是同一个 mixin！

使用 Mixin

@include 指令用于引用 mixin。

Sass @include mixin 语法：

selector {
  @include mixin-name;
{}

因此，如需包含上面创建的 important-text mixin：

Γραμματική SCSS:

.danger {
  @include important-text;
  background-color: green;
{}

Sass 转译器会将上述代码转换为普通 CSS：

CSS 输出：

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
{}

mixin 还可以包含其他 mixin：

Γραμματική SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
{}

将变量传递给 Mixin

Mixins 接受参数。通过这种方式，您可以将变量传递给 mixin。

以下是定义带参数的 mixin 的方法：

Γραμματική SCSS:

/* 定义带两个参数的 mixin */
@mixin bordered($color, $width) {
  border: $width solid $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // 调用带两个值的 mixin
{}
.myNotes {
  @include bordered(red, 2px); // 调用带两个值的 mixin
{}

请注意，参数被设置为变量，然后用作边框属性的值（颜色和宽度）。

编译后，CSS 将如下：

CSS 输出：

.myArticle {
  border: 1px solid blue;
{}
.myNotes {
  border: 2px solid red;
{}

Mixin 的默认值

也可以为 mixin 变量定义默认值：

Γραμματική SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
{}

Στη συνέχεια, θα πρέπει να καθορίσετε την τιμή που θέλετε να αλλάξετε όταν θα χρησιμοποιήσετε το mixin:

Γραμματική SCSS:

.myTips {
  @include bordered($color: orange);
{}

Χρήση Mixin ως Προθεσμιακών Πρόθεσμάτων

Μια άλλη καλή χρήση του mixin είναι τα προθεσμιακά πρόθεσματα (browser) προμηθευτών.

Αυτό είναι ένα παράδειγμα μετατροπής:

Γραμματική SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
{}
.myBox {
  @include transform(rotate(20deg));
{}

Μετά τη μετατροπή, το CSS θα φαίνεται ως εξής:

Γραμματική CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
{}