🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
🤔 Что такое миксины в препроцессорах?
Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.
🚩Примеры использования миксинов
1⃣Определение миксина
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
2⃣Использование миксина
.box {
@include border-radius(10px);
}
.button {
@include border-radius(5px);
}
🚩Пример на LESS
1⃣Определение миксина
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
2⃣Использование миксина
.box {
.border-radius(10px);
}
.button {
.border-radius(5px);
}
🚩Пример на Stylus
1⃣Определение миксина
border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
2⃣Использование миксина
.box
border-radius(10px)
.button
border-radius(5px
Ставь 👍 и забирай 📚 Базу знаний