Руководство

SCSS без магии: от переменной до готового селектора.

Короткий маршрут для тех, кто впервые открывает Sass. Каждый пример можно перенести в редактор и сразу увидеть результат.

Открыть редактор

Основы за три шага

Читайте сверху вниз: каждый следующий приём использует предыдущий.

1. Объявите переменную

Имя начинается со знака $. После двоеточия укажите значение и завершите строку точкой с запятой.

$accent: #7c3aed;

2. Вложите селектор

Результатом станет селектор .card .title. Это помогает видеть связь элементов прямо в исходном коде.

.card {
  .title { color: $accent; }
}

3. Используйте &

Амперсанд означает текущий родительский селектор. Результат: .button:hover.

.button {
  &:hover { opacity: 0.8; }
}

Это учебный, а не полный Sass-компилятор

Редактор поддерживает переменные, обычную вложенность, &, @media и @supports. Миксины, циклы, математические функции, импорты и цветовые функции Sass намеренно не реализованы. Для production-проекта используйте официальный пакет Sass в системе сборки.