Переход с SCSS на чистый CSS — быстро и без боли

CSS стремительно эволюционирует и догоняет препроцессоры. Сейчас в самом языке уже есть переменные, вложенность, цветовые функции и каскадные слои — то, ради чего раньше использовали Sass. Так что если у вас в проекте всё ещё SCSS, возможно, пора перейти на чистый CSS. Ниже — пошаговое руководство, как это сделать без боли и с удовольствием 💅

✅ Чеклист перед переходом

• 🔍 Провести аудит Sass-функциональности (переменные, миксины, вложенность, @extend, циклы)

• 🌐 Проверить поддержку в браузерах (на 2025 год: >90% поддерживают все ключевые возможности)

• 🎯 Начать с переменных: заменить $color на --color и использовать var(--color)

• 🔁 Переписать миксины и функции на CSS-классы и функции (calc(), clamp() и др.)

• ✂️ Удалить @extend и циклы — заменить шаблонами и кастомными свойствами

• 📁 Перестроить импорты — использовать @import нативно или через сборщик

• 🧪 Провести тесты: всё должно выглядеть как раньше

🎨 Пример 1: Переменные

Было (SCSS):

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Стало (CSS):

:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

🎨 Также можно использовать hsl(from var(--color) ...), чтобы заменять darken()/lighten().

📦 Пример 2: Вложенность

SCSS:

.card {
  .header {
    h2 {
      margin: 0;
    }
  }
}

CSS (вложенность поддерживается нативно!):

.card {
  & .header {
    & h2 {
      margin: 0;
    }
  }
}

🌈 Пример 3: Цветовые функции

SCSS: lighten($color, 10%)

CSS:

.primary-light {
  color: hsl(from var(--base-color-hsl) h s calc(l + 10%));
}

Или через color-mix:

.primary-dark-alt {
  color: color-mix(in srgb, var(--base-color) 85%, black);
}

🧠 Пример 4: Функции и расчёты

SCSS:

@function calculate-width($cols, $total: 12) {
  @return percentage($cols / $total);
}

CSS:

:root {
  --grid-columns: 12;
}
.column-4 {
  width: calc(4 / var(--grid-columns) * 100%);
}

🧩 Пример 5: Миксины

SCSS:

@mixin button-style($color) {...}

CSS:

.button {
  color: white;
  background-color: var(--btn-color);
}
.primary-button {
  --btn-color: blue;
}

📱 Пример 6: Media & Container Queries

SCSS: вложенные @media

CSS: контейнерные запросы:

.sidebar {
  container-type: inline-size;
}
@container (max-width: 768px) {
  .sidebar-item {
    padding: 0.5rem;
  }
}

🧰 Где продолжить?

Хочется изучить CSS глубже и научиться создавать полноценные веб-приложения? 📱✨

В приложении Кодик можно пройти курсы по HTML, CSS и JavaScript, научиться верстке и frontend-разработке, создавать адаптивные сайты и анимации. Курс подойдёт как новичкам, так и тем, кто хочет систематизировать знания.

• 🧩 Практические упражнения

• 🧪 Тесты и проекты

• 📜 Сертификаты и дипломы

• 🤖 Помощь от AI-ассистента

Изучай CSS — и стань frontend-разработчиком вместе с Кодиком!

🎯 Итог

Sass сделал своё дело — но CSS уже не тот. Сейчас можно писать мощные, масштабируемые стили без препроцессоров. Начните с одного компонента, и вы удивитесь, насколько всё стало проще.