🤔 Что такое миксины в препроцессорах?

Миксины в препроцессорах CSS, таких как Sass, LESS и Stylus, представляют собой переиспользуемые блоки кода, которые можно вставлять в другие блоки стилей. Они позволяют группировать наборы стилей, которые можно повторно использовать по всему CSS-файлу. Это помогает уменьшить дублирование кода и упростить его поддержку.

🚩Примеры использования миксинов

1⃣Определение миксина

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}   

.box {
    @include border-radius(10px);
}

.button {
    @include border-radius(5px);
}   

.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

.box {
.border-radius(10px);
}

.button {
.border-radius(5px);
}

border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
 border-radius: radius   

.box
border-radius(10px)

.button
border-radius(5px