Sass
| Sass | |
|---|---|
 | |
| Дата появи | 2007 |
| Творці | Гемптон Кетлін |
| Розробник | Наталі Вейзенбаум, Кріс Епштейн |
| Останній реліз | 3.4.23 (19 грудня 2016) |
| Система типізації | Динамічна |
| Під впливом від | 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;
}
Див. також[ред. | ред. код]
Примітки[ред. | ред. код]
- ↑ а б Sass (Syntactically Awesome Stylesheets). Архів оригіналу за 11 січня 2014. Процитовано 12 січня 2014.
- ↑ Media Mark (3.2.12). Sass - Syntactically Awesome Stylesheets. Sass-lang.com. Архів оригіналу за 18 лютого 2020. Процитовано 27 березня 2014.
Посилання[ред. | ред. код]
- Офіційний сайт 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(англ.)
| ||||||||||||||