Sass () — скриптова метамова, яка інтерпретується в каскадні таблиці стилів (CSS). Спроектована Гемптоном Кетліном та розроблена Наталі Вейзенбаум. Sass призначений для підвищення рівня абстракції коду та спрощення файлів CSS.

Мова Sass має два синтаксиси: sass (оригінальний) — відрізняється відсутністю фігурних дужок, в ньому вкладені елементи реалізовані за допомогою відступів, а правила відокремлюються переведенням рядка; scss (новий) — використовує фігурні дужки (подібно до CSS). Файли sass-синтаксису мають розширення .sass, scss-синтаксису — .scss.

Sass розширює CSS, надаючи кілька механізмів, доступних в більш традиційних мовах програмування, зокрема об'єктно-орієнтованих мовах, але недоступних для CSS. Інтерпретатор Sass транслює SassScript у блоки правил CSS. По суті, Sass — це синтаксичний цукор для CSS.

Змінні Sass дозволяє визначати змінні. Змінні починаються зі знака долара ($). Присвоєння значень змінних здійснюється за допомогою двокрапки (:).

SassScript підтримує чотири типи даних: число рядок (з лапками чи без) логічний (булевий) тип колір (ім'я або імена)

Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ CSS.

Синтаксис SCSS: $blue: #3bbfce; $margin: 16px;

.content-navigation { border-color: $blue; color: darken($blue, 20%); }

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

Синтаксис SASS: $blue: #3bbfce $margin: 16px

.content-navigation border-color: $blue color: darken($blue, 9%)

.border padding: $margin/2 margin: $margin/2 border-color: $blue Компілюється у: .content-navigation { border-color: #3bbfce; color: #2b9eab; }

.border { padding: 8px; margin: 8px; border-color: #3bbfce; }

Вкладені правила Одна з ключових особливостей Sass — вкладені правила, які полегшують процес створення і редагування вкладених селекторів.

table.hl { margin: 2em 0; td.ln { text-align: right;

li { font: { family: serif; weight: bold; size: 1.3em;

Буде скомпільовано в: table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; }

li { font-family: serif; font-weight: bold; font-size: 1.3em; }

Домішки (міксини) Для уникнення постійних повторень однакових правил CSS, в Sass введені домішки. Домішки об'єднують подібні правила та викликаються в необхідних місцях. @mixin table-base { th { text-align: center; font-weight: bold;

td, th {padding: 2px} }

#data { @include table-base; } Буде скомпільовано в: #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }

Аргументи Домішки також підтримують аргументи. @mixin left($dist) { float: left; margin-left: $dist; }

#data { @include left(10px); } Буде скомпільовано в: #data { float: left; margin-left: 10px; }

В поєднанні @mixin table-base { th { text-align: center; font-weight: bold;

td, th {padding: 2px} }

@mixin left($dist) { float: left; margin-left: $dist; }

#data { @include left(10px); @include table-base; } Буде скомпільовано в: #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }

Цикли Sass дозволяє перебір змінних за допомогою @for, @each та @while, які можуть бути використані для застосування різних стилів до елементів з однаковими ідентифікаторами або класами.

$squareCount: 3; @for $i from 1 through $squareCount { #square-#{$i} { background-color: red; width: 50px * $i; height: 120px / $i;

Буде скомпільовано в: #square-1 { background-color: red; width: 50px; height: 120px; }

#square-2 { background-color: red; width: 100px; height: 60px; }

#square-3 { background-color: red; width: 150px; height: 40px; }

Успадкування

.error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; }

.badError { @extend .error; border-width: 3px; } Буде скомпільовано в: .error, .badError { border: 1px #f00; background: #fdd; }

.error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; }

.badError { border-width: 3px; }

Див. також LESS Stylus

Примітки

Посилання Офіційний сайт Sass Репозиторій вихідного коду (Git) Порівняння коду з Sass/SCSS та LESS A Survey on CSS Preprocessors. Ricardo Queirós , 2017