Обычный CSS долгое время не умел того, что кажется базовым в любом языке программирования — переменных, вложенности правил, повторного использования кусков кода. Препроцессоры вроде Sass появились именно для того, чтобы добавить эти возможности поверх стандартного CSS.
Файлы Sass пишутся на расширенном синтаксисе, а затем компилируются в обычный CSS, который уже понимает браузер. Разработчик работает с удобным для себя языком, а на выходе получается файл, полностью совместимый с любым браузером, без разницы в поддержке.
Вложенность селекторов — одна из самых заметных удобств Sass: вместо повторения родительского селектора для каждого вложенного элемента можно просто вложить одно правило в другое, визуально повторяя структуру самой разметки, что делает файл заметно легче читать.
Переменные в Sass появились задолго до того, как их добавили в стандартный CSS, и до сих пор остаются удобнее в некоторых сценариях — например, для вычислений на этапе компиляции, которые в чистом CSS попросту недоступны, потому что там переменные вычисляются уже в браузере.
Миксины — переиспользуемые блоки стилей с параметрами — экономят немало кода там, где один и тот же набор свойств с небольшими вариациями повторяется в разных местах проекта, например для однотипных теней или градиентов с разными цветами.
Стоит заметить, что современный обычный CSS уже умеет многое из того, ради чего раньше был нужен препроцессор — переменные, вложенность через новые возможности селекторов. Из-за этого необходимость в Sass для небольших проектов сегодня не так однозначна, как несколько лет назад.
Официальная документация с полным описанием синтаксиса и возможностей доступна на сайте sass-lang.com.
