Sass @mixin dan @include

Sass Mixin

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

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

Contoh berikut menciptakan mixin dengan nama "important-text":

Syarat SCSS:

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

Tips:

Tips tentang tanda hubung dan garis bawah di Sass: tanda hubung dan garis bawah dianggap sama.

Artinya @mixin important-text { } dan @mixin important_text { } dipandang sebagai mixin yang sama!

Menggunakan Mixin

@include Instruksi digunakan untuk merujuk mixin.

Sintaks Sass @include mixin:

selector {
  @include mixin-name;
}

Dengan demikian, untuk menyertakan mixin important-text yang dibuat diatas:

Syarat SCSS:

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

Pengkonversi kode diatas oleh translator Sass akan menjadi CSS biasa:

Output CSS:

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

Mixin juga dapat mengandung mixin lain:

Syarat SCSS:

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

Mengirimkan variabel ke Mixin

Mixins menerima parameter. Dengan cara ini, Anda dapat mentransfer variabel ke mixin.

Berikut adalah cara mendefinisikan mixin dengan parameter:

Syarat SCSS:

/* Definisi mixin dengan dua parameter */
@mixin bordered($color, $width) {
  border: $width solid $color;
}
.myArticle {
  @include bordered(blue, 1px);  // Pemanggilan mixin dengan dua nilai
}
.myNotes {
  @include bordered(red, 2px); // Pemanggilan mixin dengan dua nilai
}

Perhatikan bahwa parameter diatur sebagai variabel dan kemudian digunakan sebagai nilai atribut border (warna dan lebar).

Setelah disinkronkan, CSS akan seperti berikut:

Output CSS:

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

Nilai default Mixin

Juga dapat menetapkan nilai default untuk variabel mixin:

Syarat SCSS:

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

Lalu, anda hanya perlu menentukan nilai yang akan diubah saat mengambil referensi mixin:

Syarat SCSS:

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

Menggunakan Mixin sebagai Prefix Pemasok

Penggunaan mixin lainnya adalah prefix pemasok (browser).

Ini adalah contoh transformasi:

Syarat SCSS:

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

Setelah dikompilasi, CSS akan seperti berikut:

Syarat CSS:

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