SCSS (Sassy CSS — синтаксис Sass)
SCSS (Sassy CSS) — самый популярный синтаксис препроцессора Sass, использующий фигурные скобки CSS с дополнительными возможностями: переменными, вложенностью, миксинами и функциями. Файлы SCSS компилируются в обычный CSS.
MIME-тип
text/x-scss
Тип
Текст
Сжатие
Без потерь
Преимущества
- + CSS-compatible syntax — any CSS is valid SCSS
- + Powerful module system (@use, @forward) for large projects
- + Rich built-in functions for colors, math, and lists
- + Industry standard in enterprise design systems
Недостатки
- − Requires a compilation step (Dart Sass or build tool)
- − Native CSS custom properties and nesting reduce the need for SCSS
- − Large projects can have complex dependency graphs
Когда использовать .SCSS
Используйте SCSS для крупных проектов, где полезны переменные, миксины и модульность. Для простых проектов нативного CSS с пользовательскими свойствами может быть достаточно.
Технические детали
SCSS — надмножество CSS: любой валидный CSS является валидным SCSS. Он добавляет переменные ($var), вложенность, @mixin/@include, @extend, @use/@forward (модульная система), и функции. Dart Sass — каноническая реализация. SCSS компилируется в CSS в процессе сборки.
История
Хэмптон Кэтлин создал Sass в 2006 году с синтаксисом на основе отступов. Синтаксис SCSS (Sassy CSS) с фигурными скобками был добавлен в Sass 3.0 (2010), что обеспечило обратную совместимость с существующим CSS.