Верстал ли на препроцессорах

Опыт вёрстки на препроцессорах CSS

Я имею значительный опыт работы с CSS препроцессорами, особенно с SASS/SCSS и LESS. Это важные инструменты для масштабируемой и поддерживаемой стилизации.

Что такое CSS препроцессоры

CSS препроцессоры - это язык программирования, который расширяет возможности CSS, добавляя переменные, функции, вложенность и другие механизмы. Затем они компилируются в обычный CSS.

// SCSS - выглядит близко к CSS
$primary-color: #3498db;
$border-radius: 4px;

.button {
  background: $primary-color;
  border-radius: $border-radius;
  
  &:hover {
    background: darken($primary-color, 10%);
  }
  
  &:active {
    transform: scale(0.95);
  }
}

Компилируется в:

.button {
  background: #3498db;
  border-radius: 4px;
}

.button:hover {
  background: #2980b9;
}

.button:active {
  transform: scale(0.95);
}

SASS vs SCSS vs LESS

SCSS - самый популярный. Синтаксис очень близок к CSS:

// Переменные
$spacing-unit: 8px;
$colors: (primary: #3498db, danger: #e74c3c);

// Примеси (mixins)
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Использование
.card {
  padding: $spacing-unit * 2;
  @include flex-center;
  background: map-get($colors, primary);
}

SASS (без скобок) - старый синтаксис:

$spacing-unit: 8px

.card
  padding: $spacing-unit * 2
  display: flex

LESS - альтернатива (похож на SCSS, но проще):

@primary-color: #3498db;

.button {
  background: @primary-color;
  
  &:hover {
    background: lighten(@primary-color, 10%);
  }
}

Основные возможности SCSS

1. Переменные

// Определение
$font-size-base: 16px;
$font-size-lg: $font-size-base * 1.5;
$font-size-sm: $font-size-base * 0.875;

// Использование
body {
  font-size: $font-size-base;
  line-height: 1.5;
}

h1 {
  font-size: $font-size-lg;
}

small {
  font-size: $font-size-sm;
}

2. Вложенность (nesting)

.navbar {
  background: #333;
  padding: 1rem;
  
  .navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .nav-list {
    display: flex;
    list-style: none;
    
    .nav-item {
      margin-left: 1rem;
      
      .nav-link {
        color: white;
        text-decoration: none;
        
        &:hover {
          color: #ffd700;
        }
        
        &.active {
          border-bottom: 2px solid #ffd700;
        }
      }
    }
  }
}

Вместо множества селекторов в CSS.

3. Примеси (mixins)

// Определение примеси
@mixin button-reset {
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

// Примесь с параметрами
@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

// Примесь с расширенной функциональностью
@mixin button-variant($bg-color, $text-color: white) {
  background: $bg-color;
  color: $text-color;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  
  &:hover {
    background: darken($bg-color, 10%);
  }
}

// Использование
button {
  @include button-reset;
  @include flex(row, center, center);
}

.btn-primary {
  @include button-variant(#3498db);
}

.btn-danger {
  @include button-variant(#e74c3c);
}

4. Функции

// Встроенные функции
.element {
  color: darken(#3498db, 20%); // Темнее на 20%
  background: lighten(#3498db, 20%); // Светлее на 20%
  opacity: 0.8;
  width: round(100.5px); // 101px
}

// Пользовательские функции
@function size($multiplier: 1) {
  @return $base-size * $multiplier;
}

.card {
  padding: size(2); // 2 * $base-size
  margin: size(1.5);
}

5. Условия и циклы

// @if / @else
@mixin responsive-text($size) {
  @if $size == large {
    font-size: 2rem;
  } @else if $size == medium {
    font-size: 1.5rem;
  } @else {
    font-size: 1rem;
  }
}

// @for (цикл)
@for $i from 1 through 5 {
  .col-#{$i} {
    width: (100 / 5) * $i * 1%;
  }
}

// @each (итерация)
$colors: (primary: #3498db, danger: #e74c3c, success: #27ae60);

@each $name, $color in $colors {
  .btn-#{$name} {
    background: $color;
  }
}

Практический пример: дизайн-система

// variables.scss
$spacing-unit: 8px;
$spacing: (
  xs: $spacing-unit,
  sm: $spacing-unit * 2,
  md: $spacing-unit * 3,
  lg: $spacing-unit * 4,
  xl: $spacing-unit * 5
);

$colors: (
  primary: #3498db,
  secondary: #2c3e50,
  danger: #e74c3c,
  success: #27ae60,
  warning: #f39c12
);

$font-sizes: (
  xs: 12px,
  sm: 14px,
  base: 16px,
  lg: 18px,
  xl: 20px
);

// mixins.scss
@mixin spacing($property, $key) {
  #{$property}: map-get($spacing, $key);
}

@mixin color-variant($key) {
  background: map-get($colors, $key);
  color: white;
  
  &:hover {
    background: darken(map-get($colors, $key), 10%);
  }
}

@mixin media-query($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 768px) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: 1024px) {
      @content;
    }
  }
}

// components.scss
.button {
  @include spacing(padding, sm);
  @include spacing(margin, xs);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: map-get($font-sizes, base);
  
  &--primary {
    @include color-variant(primary);
  }
  
  &--danger {
    @include color-variant(danger);
  }
  
  @include media-query(mobile) {
    width: 100%;
  }
}

Плюсы препроцессоров

• Переиспользование кода через переменные и mixins
• Меньше повторений (DRY принцип)
• Вложенность делает код структурированнее
• Математика и функции упрощают вычисления
• Условия и циклы для генерации стилей
• Модульность через @import

Минусы и альтернативы

Минусы:

• Нужен build процесс (компиляция)
• Debug может быть сложным (source maps помогают)
• CSS-in-JS может быть проще для компонентов

Альтернативы в современном веб-разработке:

• Tailwind CSS - utility-first подход (очень популярен сейчас)
• CSS-in-JS (styled-components, Emotion) - компоненты со стилями
• PostCSS - мощнее, чем препроцессоры
• CSS Modules - изолированные стили

Мой опыт и рекомендации

В моей практике:

• Использовал SCSS для крупных проектов с множеством компонентов
• Применял вложенность, но с осторожностью (максимум 3-4 уровня)
• Создавал переиспользуемые mixins для типичных паттернов
• Организовывал файлы в модули (variables, mixins, components)

Сейчас я предпочитаю:

• Tailwind CSS - для быстрого прототипирования (как в этом проекте PrepBro)
• SCSS - для компонент-библиотек с нестандартными стилями
• CSS Modules - для React компонентов, когда нужна изоляция

Современная практика: Next.js + Tailwind

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@theme inline {
  --color-primary: #3498db;
  --color-danger: #e74c3c;
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark;
  }
}

Это гибридный подход, который объединяет лучшее из обоих миров!

Вывод

Опыт с SCSS/LESS показал мне:

• Когда использовать: большие проекты с множеством компонентов
• Когда избегать: простые страницы и микро-проекты
• Альтернативы: Tailwind CSS часто удобнее для современных фреймворков
• Ключевой навык: понимание CSS и как его оптимизировать