Stylus (мова таблиць стилів)
| 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 |
Stylus — це динамічна мова таблиць стилів, яка компілюється в каскадні таблиці стилів (CSS). Її створено за аналогією з Sass та LESS. На разі це третій за популярністю препроцесор для CSS.[4] Його створено програмістом TJ Holowaychuk, що раніше працював над Node.js, а також створив мову програмування Luna. Мову написано на JADE та Node.js.
Селектори[ред. | ред. код]
На відміну від 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(англ.)
| ||||||||||||||