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 (2015-12-14)[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

Примітки
  1. LICENSE. GitHub. 26 березня 2015. Процитовано 21 грудня 2015.
  2. Release 0.53.0. GitHub. 14 грудня 2015. Процитовано 21 грудня 2015.
  3. History. GitHub. 21 грудня 2015. Процитовано 21 грудня 2015.
  4. Poll Results: Popularity of CSS Preprocessors

Посилання
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.