Stylus (мова таблиць стилів)

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

Stylus
Дата появи	2010
Творці	TJ Holowaychuk
Розробник	LearnBoost (29 березня 2011 - 26 березня 2015) / (26 березня 2015 - донині)
Останній реліз	0.53.0 (14 грудня 2015; 8 років тому (2015-12-14))
Система типізації	динамічна
Під впливом від	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 

Примітки

1. LICENSE. GitHub. 26 березня 2015. Процитовано 21 грудня 2015.
2. . GitHub. 14 грудня 2015. Архів оригіналу за 7 листопада 2020. Процитовано 21 грудня 2015.
3. . GitHub. 21 грудня 2015. Архів оригіналу за 20 жовтня 2020. Процитовано 21 грудня 2015.
4. . Архів оригіналу за 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(англ.)