Препроцессоры CSS: SASS, LESS, Stylus — базовые понятия

Зачем нужны препроцессоры? 🔥

Чистый CSS — это мощно, но писать его в больших проектах может быть утомительно. Представьте:

/* Классический CSS */
.header {
  background: #333;
  padding: 20px;
}

.header__logo {
  width: 150px;
  height: auto;
}

.header__nav {
  display: flex;
  gap: 15px;
}

Препроцессоры добавляют суперспособности:

Вложенность — как в HTML
Переменные — для цветов, размеров
Миксины — переиспользуемые блоки кода
Импорты — разбивка на модули
Математика — вычисления прямо в стилях

Три кита: SASS, LESS, Stylus 🐋

Особенность	SASS/SCSS	LESS	Stylus
Синтаксис	`.sass` / `.scss`	`.less`	`.styl`
Зависимости	Ruby/node-sass	JavaScript	Node.js
Переменные	`$variable`	`@variable`	`variable =`
Активность	Самый популярный	Устаревает	Альтернатива

💡 Совет: Начните с SCSS — он ближе всего к обычному CSS и имеет лучшую поддержку.

SCSS — золотой стандарт ✨

Переменные как в CSS Custom Properties, но мощнее

$primary-color: #3a86ff;
$spacing-unit: 1rem;

.button {
  background: $primary-color;
  padding: $spacing-unit $spacing-unit * 2;
}

Вложенность — визуальная иерархия

.card {
  border: 1px solid #eee;

  &__header {
    font-size: 1.5rem; /* .card__header */
  }

  &:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* .card:hover */
  }
}

Миксины — функции для CSS

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.hero {
  @include flex-center(column);
}

LESS — простота для быстрых проектов ⚡

Отлично работает с Bootstrap (который изначально написан на LESS):

@button-radius: 4px;

.button {
  border-radius: @button-radius;

  .generate-sizes(4); // Вызов миксина
}

.generate-sizes(@n) {
  .button-@{n}x {
    padding: @n * 10px;
  }
}

Stylus — минимализм и свобода 🎨

Синтаксис без скобок и точек с запятой — на любителя:

primary-color = #ff2d54

body
  font 16px Helvetica
  color primary-color

  button
    background primary-color
    border none

Как начать использовать? 🛠️

1. Установите через npm:

npm install sass less stylus

2. Добавьте в сборку (например, в webpack):

// webpack.config.js
module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

3. Или используйте live-компиляцию:

sass --watch input.scss output.css

Практический пример: кнопка с состоянием 🎮

SCSS-версия с переменными и миксинами:

// _variables.scss
$btn-padding: 0.75em 1.5em;
$transition: all 0.3s ease;

// _mixins.scss
@mixin button-variant($bg, $color) {
  background: $bg;
  color: $color;

  &:hover {
    background: darken($bg, 10%);
  }
}

// buttons.scss
@import 'variables';
@import 'mixins';

.btn {
  padding: $btn-padding;
  border: none;
  transition: $transition;

  &--primary {
    @include button-variant(#3a86ff, white);
  }

  &--danger {
    @include button-variant(#ff2d54, white);
  }
}

Когда не стоит использовать препроцессоры? 🚧

Маленькие проекты (оверкилл)
Команда не знает их (добавит сложность)
Нет сборщика (webpack, gulp, etc.)
Используются CSS-переменные (Custom Properties)

Что дальше? 🚀

Освойте вложенность и переменные
Поэкспериментируйте с миксинами
Разделяйте код на частичные файлы (_header.scss)
Подключите автопрефиксер для вендорных префиксов
Изучите функции (lighten(), darken(), percentage())

Препроцессоры — это не «замена» CSS, а его логичное развитие. Они делают стилизацию предсказуемой, поддерживаемой и... приятной! Попробуйте — и назад дороги не будет. 😉