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 (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(англ.)
|