Миксины, функции и вложенные стили в препроцессорах

🔮 Зачем нужны миксины и функции?

Препроцессоры CSS (Sass, Less, Stylus) — это как суперспособности для стилей. Они позволяют писать код быстрее, чище и с меньшим количеством повторений. Три главных инструмента:

1. Миксины — переиспользуемые блоки стилей
2. Функции — вычисляемые значения
3. Вложенные стили — понятная структура

🧩 Миксины: стили на повторном использовании

Миксины — это шаблоны стилей, которые можно включать в разные селекторы. Представьте Lego-блок: один раз создали — много раз использовали.

// Создаём миксин для теней
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
  -webkit-box-shadow: $x $y $blur $color;
}

// Применяем
.card {
  @include box-shadow(2px, 2px, 10px, rgba(0,0,0,0.1));
  background: white;
}

💡 Совет: Используйте миксины для вендорных префиксов, анимаций или сложных гридов. Данила Бежин называет их "стилевыми функциями высшего порядка" (шутка, но звучит круто).

🧮 Функции: CSS с математикой

Функции в препроцессорах похожи на функции в JavaScript — они принимают параметры и возвращают значения.

// Функция для конвертации px в rem
@function to-rem($px) {
  @return ($px / 16) * 1rem;
}

// Использование
body {
  font-size: to-rem(18); // → 1.125rem
  padding: to-rem(20);   // → 1.25rem
}

Где ещё полезны функции:

• Цветовые манипуляции (lighten, darken)
• Математические операции
• Генерация сложных значений

🌳 Вложенные стили: понятная иерархия

Вложенность — это суперспособность для организации кода. Вместо длинных цепочек селекторов:

// Вместо этого:
.navbar { ... }
.navbar .list { ... }
.navbar .list .item { ... }
.navbar .list .item.active { ... }

// Пишем так:
.navbar {
  background: #333;

  .list {
    display: flex;

    .item {
      padding: 1rem;

      &.active {
        color: gold;
      }
    }
  }
}

⚠️ Важно: Не злоупотребляйте вложенностью глубже 3-4 уровней — это усложнит читаемость.

💎 Комбинируем техники

Настоящая магия начинается, когда вы соединяете все три метода:

// Миксин с параметрами
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Функция для цветов
@function brand-color($weight) {
  @return mix(white, #2c3e50, $weight);
}

// Применяем всё вместе
.header {
  background: brand-color(10%);

  @include respond-to(768px) {
    padding: 2rem;

    .logo {
      transform: scale(1.2);
    }
  }
}

🛠 Практика: кнопка с состояниями

Давайте создадим переиспользуемую кнопку:

// Миксин для кнопки
@mixin button($bg, $text-color) {
  display: inline-block;
  padding: 12px 24px;
  background: $bg;
  color: $text-color;
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    background: darken($bg, 10%);
    transform: translateY(-2px);
  }

  &:active {
    transform: translateY(0);
  }
}

// Использование
.btn-primary {
  @include button(#3498db, white);
}

.btn-alert {
  @include button(#e74c3c, white);
}

📊 Сравнение возможностей

🚀 Что дальше?

• Поэкспериментируйте с цветовыми функциями (lighten, saturate)
• Попробуйте создать миксин для flex-контейнера
• Изучите циклы (@for, @each) для генерации стилей

Препроцессоры — это не будущее, это настоящее CSS. Как говорит Данила Бежин в своих видео: "Пишите стили так, чтобы их было приятно читать, а не только работать".