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