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

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

Примітки

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