Sass

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