Что такое Sass

Sass — это препроцессор CSS: программа, которая берёт стили, написанные на расширенном языке, и превращает их в обычный CSS. Вы пишете переменные, миксины, функции и циклы, Sass превращает их в обычные правила, а браузер получает только готовый CSS. Такое превращение называется компиляцией.

Курс использует Dart Sass версии 1.80 и новее — официальную и единственную поддерживаемую реализацию. Старые LibSass и пакет node-sass устарели, устанавливать их не нужно.

От SCSS к CSS

Вот небольшой файл Sass. Он хранит фирменный цвет в переменной и вкладывает состояние наведения внутрь правила кнопки:

// styles/main.scss
$primary: #2563eb;
 
.btn {
  padding: 8px 16px;
  color: white;
  background: $primary;
 
  &:hover {
    background: black;
  }
}

Что получает браузер после компиляции:

.btn {
  padding: 8px 16px;
  color: white;
  background: #2563eb;
}
.btn:hover {
  background: black;
}

Переменной больше нет — вместо неё подставлено значение, а вложенное правило стало отдельным правилом .btn:hover. Результат работает в любом браузере:

<style>
  .btn {
    padding: 8px 16px;
    color: white;
    background: #2563eb;
  }
  .btn:hover {
    background: black;
  }
</style>
 
<button class="btn">Записаться</button>

Наведите указатель на кнопку — фон станет чёрным.

Два синтаксиса

Sass понимает два способа записи одного и того же:

Та же кнопка в синтаксисе с отступами:

// styles/main.sass
$primary: #2563eb
 
.btn
  padding: 8px 16px
  background: $primary

Любой правильный CSS-файл — это и правильный SCSS-файл, поэтому можно переименовать style.css в style.scss и добавлять возможности Sass постепенно. Поэтому почти все проекты используют SCSS, и этот курс тоже.

Нужен ли Sass сегодня

Современный CSS позаимствовал у Sass часть идей: пользовательские свойства (--primary) и встроенную вложенность. Что Sass добавляет до сих пор:

• миксины и функции — повторно используемые куски стилей и вычисления;
• циклы и условия — десятки служебных классов из одного списка;
• модули — стили в множестве файлов, которые собираются в один CSS-файл;
• проверки при компиляции — опечатка в имени переменной становится ошибкой, а не тихо сломанными стилями.

Они хорошо работают вместе: Sass упорядочивает код, а пользовательские свойства меняют значения в браузере. Как их сочетать, показано в одном из последних уроков.

Частая ошибка

Браузер не понимает SCSS. Ссылка на исходный файл ничего не даёт:

<link rel="stylesheet" href="styles/main.scss">
<p>Стили не применились.</p>

Подключайте всегда скомпилированный файл .css. Как его получить, показано в следующем уроке.