Sass — Вікіпедія

Sass
Дата появи	2007
Творці	Гемптон Кетлін
Розробник	Наталі Вейзенбаум, Кріс Епштейн
Останній реліз	3.4.23 (19 грудня 2016; 7 років тому (2016-12-19))
Система типізації	Динамічна
Під впливом від	CSS, Haml, YAML
Вплинула на	LESS, Stylus, Tritium
Операційна система	Крос-платформна
Ліцензія	MIT
Звичайні розширення файлів	.sass, .scss
Вебсайт	sass-lang.com

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

Мова Sass має два синтаксиси:

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

Файли sass-синтаксису мають розширення .sass, scss-синтаксису — .scss.

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

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

SassScript підтримує чотири типи даних:^[1]

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

Змінна може бути аргументом чи результатом однієї чи кількох функцій. Під час трансляції значення змінних вставляються у вихідний (тобто результуючий) документ 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; } 

Домішки також підтримують аргументи.^[2]

@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 [Архівовано 18 лютого 2020 у Wayback Machine.](англ.)
• Репозиторій вихідного коду (Git) [Архівовано 7 січня 2014 у Wayback Machine.](англ.)
• Порівняння коду з Sass/SCSS та LESS(англ.)
• A Survey on CSS Preprocessors. Ricardo Queirós [Архівовано 21 березня 2018 у Wayback Machine.], 2017(англ.)