Ответ
Во фронтенде миксины часто используются для переиспользования кода. Вот популярные примеры:
// Clearfix
@mixin clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
// Media queries
@mixin respond-to($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
// Flexbox центрирование
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// Текст с многоточием
@mixin text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
В JavaScript (например, в Vue) миксины могут содержать методы, хуки жизненного цикла или computed-свойства:
// Vue mixin
const formMixin = {
methods: {
validateForm() {
// логика валидации
}
}
}
Миксины помогают избежать дублирования кода и поддерживать единый стиль в проекте.