Stylus — это динамический язык препроцессора таблиц стилей , который компилируется в каскадные таблицы стилей (CSS). На его дизайн повлияли Sass и Less . Он считается четвертым по использованию синтаксисом препроцессора CSS. [3] Он был создан TJ Holowaychuk, бывшим программистом Node.js и создателем языка Luna. Он написан на JADE и Node.js.
В отличие от CSS, который использует фигурные скобки для открытия и закрытия блоков объявлений, здесь используется отступ. Кроме того, точки с запятой (;) опционально опускаются. Следовательно, следующий CSS:
тело { цвет : белый ; } можно сократить до:
цвет корпуса : белый Кроме того, двоеточия (:) и запятые (,) также необязательны; это значит, что вышесказанное можно записать так:
цвет корпуса белый Stylus позволяет определять переменные, однако, в отличие от Less и Sass, он не использует символ для определения переменных. Кроме того, назначение переменных выполняется автоматически путем разделения свойства и ключевых слов. Таким образом, переменные похожи на переменные в Python .
сообщение = «Привет, мир!» div :: перед текстовым сообщением цвет # ffffff Компилятор Stylus переведет указанный выше документ в:
div :: before { content : 'Привет, мир!' ; color : #ffffff ; } И миксины, и функции определяются одинаково, но применяются по-разному.
Например, если вы хотите определить свойство радиуса границы CSS без использования различных вендорных префиксов, вы можете создать:
border-radius ( n ) -webkit-border-radius n -moz-border-radius n border-radius n затем, чтобы включить это как миксин, вы должны сослаться на него так:
div . прямоугольник border-radius ( 10px ) это будет скомпилировано в:
div . прямоугольник { -webkit- border-radius : 10 пикселей ; -moz- border-radius : 10 пикселей ; border-radius : 10 пикселей ; } Чтобы включить переменные в аргументы и идентификаторы, заключите переменную(ые) в фигурные скобки. Например,
-webkit- { 'граница' + '-радиус' } оценивает
-webkit-граница-радиус