CSS препроцесори: SASS, SCSS та LESS

Що таке CSS Препроцесори?

CSS препроцесори — це мови сценаріїв, які розширюють CSS такими функціями, як змінні, вкладеність, міксини та функції. Код препроцесора компілюється в стандартний CSS перед тим, як бути наданим браузеру.

Препроцесор	Розширення	Ключова Особливість
SASS	`.sass`	Синтаксис на основі відступів (без фігурних дужок/крапок з комою)
SCSS	`.scss`	Синтаксис, подібний до CSS, з фігурними дужками та крапками з комою
LESS	`.less`	Схожий на SCSS, використовує `@` для змінних

Ключові Особливості

1. Змінні

scss

// SCSS
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

2. Вкладеність

scss

.navbar {
  display: flex;
  
  &__item {
    padding: 10px;
    
    &:hover {
      background: #f0f0f0;
    }
    
    &--active {
      font-weight: bold;
    }
  }
}

3. Міксини

scss

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == tablet {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

.hero {
  @include flex-center;
  height: 100vh;
  
  @include responsive(tablet) {
    height: 60vh;
  }
}

4. Частини та Імпорти

scss

// _variables.scss (частина — не компілюється окремо)
$primary: #007bff;

// main.scss
@use 'variables';

body { color: variables.$primary; }

5. Функції та Операції

scss

@function rem($pixels) {
  @return $pixels / 16 * 1rem;
}

h1 { font-size: rem(32); } // 2rem

SCSS проти Нативних CSS Кастомних Властивостей

Особливість	Змінні SCSS	CSS Кастомні Властивості
Компілюється на	Час збірки	Час виконання
Динамічні зміни	Ні	Так (через JS)
Скоупінг	Лексичний	Каскадний
Підтримка медіа-запитів	Ні	Так
Вкладеність, міксини	Так	Ні

Коли Використовувати Препроцесори

Використовуйте препроцесори, коли:

Вам потрібні міксини, функції, цикли
Працюєте з великими кодовими базами, які виграють від частин
Ваш проект використовує BEM або інші угоди про найменування з вкладеністю

Розгляньте нативний CSS, коли:

Вам потрібне темування в режимі виконання (темний/світлий режим)
Проект малий і простий
Ви хочете менше залежностей при збірці

Важливо:

Сучасний CSS прийняв багато функцій препроцесорів (змінні, вкладеність, calc()). Проте SCSS залишається широко використовуваним у виробництві для міксинів, функцій та кращої організації коду. Багато проектів використовують як SCSS, так і CSS кастомні властивості разом.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань