Sass @mixin и @include
Sass Миксины
Директива @mixin позволяет создавать CSS-код, который будет повторно использоваться на всем веб-сайте.
Директива @include создана, чтобы вы могли использовать (включать) миксин.
Определение миксина
Миксин определяется с помощью директивы @mixin.
Sass @mixin Синтаксис:
@mixin name {
property: value;
property: value;
...
}
В следующем примере создается миксин с именем "important-text":
SCSS Синтаксис:
@mixin important-text {
color:
red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Примечание: Замечание по дефисам и подчеркиванию в Sass: дефисы и подчеркивания считаются одинаковыми. Это означает, что @mixin important-text { } и @mixin important_text { } считаются одним и тем же миксином!
Использование миксина
Директива @include используется для включения миксина.
Sass @include Синтаксис миксина:
selector {
@include mixin-name;
}
Т.о., чтобы включить миксин с важным текстом, созданный выше:
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;
}
Миксин также может включать другие миксины:
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); // Вызов миксина с двумя значениями
}
Обратите внимание, что аргументы задаются как переменные, а затем используются как значения (цвет и ширина) свойства границы.
После компиляции 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);
}
