Stylus (мова таблиць стилів)
Stylus — це динамічна мова таблиць стилів, яка компілюється в каскадні таблиці стилів (CSS). Її створено за аналогією з Sass та LESS. На разі це третій за популярністю препроцесор для CSS.[4] Його створено програмістом TJ Holowaychuk, що раніше працював над Node.js, а також створив мову програмування Luna. Мову написано на JADE та Node.js.
| Stylus | |
|---|---|
 | |
| Дата появи | 2010 |
| Творці | TJ Holowaychuk |
| Розробник | LearnBoost (29 березня 2011 - 26 березня 2015) / Automattic (26 березня 2015 - донині)[1] |
| Останній реліз | 0.53.0[2] (14 грудня 2015[3]) |
| Система типізації | динамічна |
| Під впливом від | CSS, Sass, LESS |
| Операційна система | крос-платформова |
| Ліцензія | MIT License |
| Звичайні розширення файлів | .styl |
| Репозиторій вихідного коду | github.com/stylus/stylus |
| Вебсайт | Stylus |
Селектори
ред.На відміну від CSS, котрий використовує дужки, щоб відокремлювати правила для селекторів, тут використовуються відступи. Окрім того, двокрапка (:) може бути за бажанням замінена на пробіл. Тому наступний CSS:
body {
color: white;
}
буде скорочено до:
body
color white
Змінні
ред.Stylus дає змогу оголошувати змінні. На відміну від LESS та Sass, тут непотрібно використовувати символ, що передує імені змінної. Окрім того, оголошення змінних проходить автоматично, якщо властивість розділяється з ключовим словом або словами. Ця риса мови ідентична мові Python.
message = 'Hello, World!'
div:before
content message
color #ffffff
Компілятор Stylus скомпілює це в наступний код:
div:before {
content: 'Hello World';
color: #ffffff;
}
«Міксіни» та функції
ред.Міксіни (mixins) та функції оголошуються однаково, але викликаються по-різному.
Наприклад, якщо вам потрібно визначити заокруглені бордюри (border) у CSS без використання префіксів, код буде таким:
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
і далі, щоб використати цей mixin, знадобиться такий код:
div.rectangle
border-radius(10px)
в результаті ви отримаєте:
div.rectangle {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Інтерполяція (Interpolation)
ред.Щоб додати змінні як аргументи й ідентифікатори, треба передавати їх у фігурних дужках. Наприклад:
-webkit-{'border' + '-radius'}
буде скомпільовано в:
-webkit-border-radius
Примітки
ред.- ↑ LICENSE. GitHub. 26 березня 2015. Процитовано 21 грудня 2015.
- ↑ Release 0.53.0. GitHub. 14 грудня 2015. Архів оригіналу за 7 листопада 2020. Процитовано 21 грудня 2015.
- ↑ History. GitHub. 21 грудня 2015. Архів оригіналу за 20 жовтня 2020. Процитовано 21 грудня 2015.
- ↑ Poll Results: Popularity of CSS Preprocessors. Архів оригіналу за 31 січня 2013. Процитовано 18 березня 2016.
Посилання
ред.- stylus-lang.com — офіційний сайт «Stylus».
- Репозиторій Stylus (Git) [Архівовано 10 лютого 2016 у Wayback Machine.]
- Poll Results: Popularity of CSS Preprocessors [Архівовано 21 березня 2018 у Wayback Machine.], 2012(англ.)
- A Survey on CSS Preprocessors. Ricardo Queirós [Архівовано 21 березня 2018 у Wayback Machine.], 2017(англ.)