Sass

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук
Sass
Дата появи: 2007
Творці: Гемптон Кетлін
Розробник: Натан Вейзенбаум, Кріс Еппштейн
Останній реліз: 3.2.12 (12 січня 2014; 250 днів тому)
Система типізації: Динамічна
Під впливом від: 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]

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;
}

Успадкування[ред.ред. код]

.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)
  2. Media Mark (3.2.12). «Sass - Syntactically Awesome Stylesheets». Sass-lang.com. Процитовано 2014-03-27. 

Посилання[ред.ред. код]