Sass

Sass
Дата появи2007
ТворціГемптон Кетлін
РозробникНаталі Вейзенбаум, Кріс Епштейн
Останній реліз3.4.23 (19 грудня 2016; 8 років тому (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;
}

Див. також

Примітки

  1. ↑ а б Sass (Syntactically Awesome Stylesheets). Архів оригіналу за 11 січня 2014. Процитовано 12 січня 2014.
  2. ↑ Media Mark (3.2.12). Sass - Syntactically Awesome Stylesheets. Sass-lang.com. Архів оригіналу за 18 лютого 2020. Процитовано 27 березня 2014.

Посилання