Стилус (язык таблиц стилей) - Stylus (stylesheet language)

Стилус
Stylus-logo.svg
РазработаноТ.Я. Головайчук
РазработчикLearnBoost (29 марта 2011 г. (2011-03-29) - 26 марта 2015 г. (2015-03-26)) / Automattic (26 марта 2015 г.) (2015-03-26) - Подарок)[1]
Впервые появился2010; 10 лет назад (2010)
Стабильный выпуск
0.53.0[2] / 14 декабря 2015 г.; 5 лет назад (2015-12-14)[3]
Печатная дисциплинадинамичный
Операционные системыКроссплатформенность
ЛицензияЛицензия MIT
Расширения имени файла.styl
Интернет сайтСтилус
Под влиянием
CSS, Sass, МЕНЬШЕ

Стилус это динамическая таблица стилей препроцессор язык, который скомпилирован в Каскадные таблицы стилей (CSS). На его дизайн повлияли Sass и МЕНЬШЕ. Он считается четвертым по популярности синтаксисом препроцессора CSS.[4] Его создал Т.Дж. Головайчук, бывший программист компании Node.js и создатель языка Luna. Это написано в ДЖЕЙД и Node.js.

Селекторы

В отличие от CSS, который использует подтяжки для открытия и закрытия блоков объявлений используется отступ. Кроме того, точки с запятой (;) необязательно опускаются. Следовательно, следующий CSS:

тело {    цвет: белый;}

можно сократить до:

тело     цвет: белый

Кроме того, двоеточие (:) и запятые (,) также необязательны; это означает, что приведенное выше можно записать как,

тело     цвет белый

Переменные

Stylus позволяет определять переменные, однако в отличие от LESS и Sass, он не использует символы для определения переменных. Кроме того, присвоение переменной выполняется автоматически путем разделения свойства и ключевого слова (-ей). Таким образом, переменные аналогичны переменным в Python.

сообщение = 'Привет, мир!'div::перед  содержание сообщение  цвет #ffffff

Компилятор Stylus переведет указанный выше документ на:

div::перед {  содержание: 'Привет, мир!';  цвет: #ffffff;}

Миксины и функции

И миксины, и функции определяются одинаково, но применяются по-разному.

Например, если вы хотите определить свойство радиуса границы CSS без использования различных Префиксы поставщиков вы можете создать:

border-radius(п)  -webkit-border-radius п  -moz-граница-радиус п  border-radius п

затем, чтобы включить это как миксин, вы должны ссылаться на него как:

div.прямоугольник   border-radius(10 пикселей)

это будет компилироваться в:

div.прямоугольник {  -webkit-border-radius: 10px;  -моз-border-radius: 10px;  border-radius: 10px;}

Интерполяция

Чтобы включить переменные в аргументы и идентификаторы, переменные заключаются в фигурные скобки. Например, 

 -webkit-{'граница' + '-радиус'}

оценивает 

-webkit-border-radius

Рекомендации

  1. ^ "ЛИЦЕНЗИЯ". GitHub. 2015-03-26. Получено 2015-12-21.
  2. ^ «Выпуск 0.53.0». GitHub. 2015-12-14. Получено 2015-12-21.
  3. ^ "История". GitHub. 2015-12-21. Получено 2015-12-21.
  4. ^ Результаты опроса: популярность препроцессоров CSS

внешняя ссылка