Компиляция происходит локально

Превращайте SCSS в понятный CSS — прямо во время ввода.

Пишите переменные, вложенные правила и селектор &. Sass Atelier развернёт структуру, покажет ошибку и объяснит результат.

Живая мастерская

Редактор и результат

Данные не покидают ваш браузер.

Входной SCSS

Поддерживаются переменные, вложенность, & и media

SCSS

$brand: #7c3aed;
$surface: #f5f3ff;

.profile-card {
  padding: 24px;
  background: $surface;
  border-radius: 16px;

  &__title {
    color: $brand;
    font-size: 24px;
  }

  &:hover {
    transform: translateY(-4px);
  }
}

Готовый CSS

3 правил · 2 переменных

CSS

.profile-card {
  padding: 24px;
  background: #f5f3ff;
  border-radius: 16px;
}

.profile-card__title {
  color: #7c3aed;
  font-size: 24px;
}

.profile-card:hover {
  transform: translateY(-4px);
}

Что происходит под капотом

Три идеи, которые делают SCSS удобным

Этот учебный компилятор покрывает самые полезные конструкции для знакомства с синтаксисом.

$brand

Переменные

Сохраните цвет или размер один раз и используйте значение во всех правилах.

Поддерживается в редакторе

{ … }

Вложенность

Вложенный селектор автоматически объединяется с родительским селектором.

Поддерживается в редакторе

&:hover

Родительский селектор

Символ & заменяется полным селектором текущего блока.

Поддерживается в редакторе