Що таке SCSS та чим відрізняється від CSS

CSS, SCSS, Веб-розробка · 13-2-2025

SCSS (Sassy CSS) - це мова препроцесора CSS, яка надає розширені можливості для написання стилів для веб-сайтів. Одним із головних переваг використання SCSS є можливість писати код більш структуровано та організовано, що полегшує розробку та підтримку проєктів.

Основні відмінності між SCSS та CSS:

1. Синтаксис:

SCSS використовує схожий на CSS синтаксис з додаванням можливостей, які не доступні в звичайному CSS. Наприклад, у SCSS можна використовувати змінні, вкладені селектори, міксіни та багато іншого.

Приклад змінних у SCSS:

$primary-color: #ff0000;
$secondary-color: #00ff00;

.body {
  background-color: $primary-color;
  color: $secondary-color;
}

2. Наслідування та вкладеність:

У SCSS можливо вкладати один селектор всередині іншого, що дозволяє зручно структурувати стилі.

Приклад вкладеності у SCSS:

.container {
  width: 100%;
  .item {
    color: #333;
  }
}

3. Міксіни:

Міксіни - це спеціальні функції у SCSS, які можна використовувати для повторного використання стилів.

Приклад міксіну у SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box {
  @include transform(rotate(30deg));
}

4. Імпорт файлів:

У SCSS можна розділити стилі на декілька файлів і потім імпортувати їх у головний файл, що полегшує управління кодом.

Приклад імпорту у SCSS:

@import 'variables';
@import 'mixins';
@import 'buttons';

5. Змінні:

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