Какие mixin создавал

«Какие mixin создавал» — вопрос из категории Паттерны, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Во фронтенде миксины часто используются для переиспользования кода. Вот популярные примеры:

// 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() {
      // логика валидации
    }
  }
}

Миксины помогают избежать дублирования кода и поддерживать единый стиль в проекте.