Что такое Sass и SCSS?

Sass/SCSS

Sass (Syntactically Awesome Style Sheets) — это препроцессор CSS, который добавляет возможности, отсутствующие в обычном CSS. Sass позволяет использовать переменные, вложенность, миксины и другие мощные функции.

Синтаксисы Sass

• SCSS — синтаксис похожий на CSS с фигурными скобками
• Sass — синтаксис с отступами без скобок

Основные возможности

• Переменные — хранение значений для повторного использования
• Вложенность — иерархическое написание селекторов
• Миксины — переиспользуемые блоки стилей
• Наследование — расширение селекторов
• Функции — вычисления и операции

Примеры Sass/SCSS

 1// Переменные
 2$primary-color: #3498db;
 3$margin: 16px;
 4
 5// Вложенность
 6.navbar {
 7    background: $primary-color;
 8
 9    ul {
10        margin: 0;
11        padding: 0;
12
13        li {
14            list-style: none;
15
16            a {
17                color: white;
18                text-decoration: none;
19
20                &:hover {
21                    opacity: 0.8;
22                }
23            }
24        }
25    }
26}
27
28// Миксин
29@mixin button-style($bg-color, $text-color) {
30    background: $bg-color;
31    color: $text-color;
32    padding: 10px 20px;
33    border: none;
34    border-radius: 4px;
35    cursor: pointer;
36}
37
38.primary-button {
39    @include button-style($primary-color, white);
40}

Директивы и функции

• @import — импорт других файлов Sass
• @extend — наследование стилей
• @if/@else — условные конструкции
• @for/@each/@while — циклы
• lighten()/darken() — функции работы с цветом

Инструменты компиляции

• Dart Sass — основная реализация
• node-sass — Node.js биндинги (deprecated)
• Webpack — с sass-loader
• Vite — встроенная поддержка

Установка Sass

Для установки Sass используй один из следующих способов:

 1# Глобальная установка
 2npm install -g sass
 3
 4# Локальная установка для проекта
 5npm install --save-dev sass
 6
 7# Компиляция файла
 8sass input.scss output.css
 9
10# Отслеживание изменений
11sass --watch input.scss:output.css

FAQ

В чем разница между Sass и Less?

Sass более мощный с функциями и циклами, Less проще в изучении. Sass имеет лучшую экосистему и поддержку.

Какой синтаксис выбрать: Sass или SCSS?

SCSS более популярен, так как похож на обычный CSS. Sass с отступами более краткий, но менее привычный.