Sass @mixin та @include
Sass Міксини
Директива @mixin дозволяє створювати CSS-код, який повторно використовуватиметься на вебсайті.
Директива @include створена, щоб дозволити вам використовувати (включати) міксин.
Визначення міксина
Міксин визначається за допомогою директиви @mixin.
Синтаксис Sass @mixin:
@mixin назва {
властивість: значення;
властивість: значення;
...
}
У наступному прикладі створюється міксин з назвою "important-text":
SCSS Синтаксис:
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Підказка: Порада про дефіси та підкреслення в SASS: дефіси та підкреслення вважаються однаковими. Це означає, що important-text { } та @mixin important_text { } розглядаються як той самий міксин!
Використання міксину
Директива @include використовується для включення міксину.
Синтаксис Sass @include міксину:
selector {
@include mixin-name;
}
Отже, включити міксин important-text, створений вище:
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;
}
Run Example »
Міксин може також включати інші міксини:
SCSS Синтаксис:
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
Передача змінних до міксина
Міксини приймають аргументи. Таким чином ви можете передати змінні до міксина.
Ось як визначити міксин з аргументами:
SCSS Синтаксис:
/* Визначити міксин з двома аргументами */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Викликати міксин з двома значеннями
}
.myNotes {
@include bordered(red, 2px); // Викликати міксин з двома значеннями
}
Зауважте, що аргументи встановлюються як змінні, а потім використовуються як значення (колір і ширина) властивості border.
Після компіляції CSS буде виглядати так:
CSS Виведення:
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
Спробуйте самі »
Значення за замовчуванням для міксину
Можна також визначити значення за замовчуванням для змінних міксинів:
SCSS Синтаксис:
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
Тоді вам потрібно лише вказати значення, які змінюються, коли ви включаєте міксин:
SCSS Синтаксис:
.myTips {
@include bordered($color: orange);
}
Використання міксину для префіксів постачальників
Ще одне гарне використання міксина - це префікси постачальників.
Ось приклад для перетворення:
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);
}
