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

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку
Stylus
Stylus-logo.svg
Дата появи:2010
Творці:TJ Holowaychuk
Розробник:LearnBoost (29 березня 2011 - 26 березня 2015) / Automattic (26 березня 2015 - донині)[1]
Останній реліз:0.53.0[2] (14 грудня 2015; 1012 днів тому[3])
Система типізації:динамічна
Під впливом від:CSS, Sass, LESS
ОС:крос-платформова
Ліцензія:MIT License
Звичайні розширення файлів:.styl
Сторінка інтернет: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. 2015-03-26. Процитовано 2015-12-21. 
  2. Release 0.53.0. GitHub. 2015-12-14. Процитовано 2015-12-21. 
  3. History. GitHub. 2015-12-21. Процитовано 2015-12-21. 
  4. Poll Results: Popularity of CSS Preprocessors

Посилання[ред. | ред. код]