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

Ответ

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

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

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

Ответ 18+ 🔞

Да ты посмотри, какие штуки придумали, чтобы не повторяться, как попугай! Миксины, блядь, во фронтенде — это как та самая бабушка в деревне, у которой на все случаи жизни есть своя присказка. Взял раз, обозвал, и потом тыкаешь куда надо, вместо того чтобы одно и то же по десять раз писать.

Вот, например, этот clearfix — классика жанра, ёпта! Раньше верстальщики с ума сходили, когда флоаты выпадали из потока. А теперь? Раз — миксин, и в рот меня чих-пых, всё на месте!

// Clearfix
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

А эти медиа-запросы? Раньше ты на каждом брейкпоинте городил одни и те же @media, а теперь? Объявил один раз respond-to, и потом только вызываешь, как собаку: «Иди сюда, блядь, отработай!»

// Media queries
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

Ну и, конечно, священный грааль центрирования через флекс. Каждый второй дизайнер норовит всё по центру разместить. Вместо того чтобы каждый раз три свойства прописывать, ты просто @include flex-center; — и волнение ебать, всё идеально!

// Flexbox центрирование
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

А этот text-ellipsis — просто песня! Когда текст не влезает, и нужно многоточие... Раньше бы голову ломал, а теперь одна строчка, и текст ведёт себя, как воспитанный, блядь.

// Текст с многоточием
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

И это, сука, не только в CSS! Глянь на JavaScript, особенно во всяких Vue. Там тоже миксины — как общая тумбочка в коммуналке. Все туда свои методы скидывают, а потом используют.

// Vue mixin
const formMixin = {
  methods: {
    validateForm() {
      // логика валидации
    }
  }
}

Представляешь? Вместо того чтобы в каждом компоненте один и тот же validateForm писать, ты его в миксин засунул, и потом просто подмешиваешь, куда нужно. Красота, блядь! Код сухой, повторений нет, и поддерживать в разы легче. Главное — не переборщить, а то получится такая каша из миксинов, что сам потом не разберёшь, что откуда приплыло. Но в целом, штука — овердохуища полезная!