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

Стилус

Разработано	Ти Джей Головайчук
Разработчик	LearnBoost (29 марта 2011 г. ( 29 марта 2011 г. ) - 26 марта 2015 г. ( 26 марта 2015 г. ) ) / Automattic (26 марта 2015 г. ( 26 марта 2015 г. ) - настоящее время)
Впервые появился	2010 г ( 2010 )
Стабильная версия	0.63.0 / 5 марта 2024 г ( 05.03.2024 )
Дисциплина набора текста	динамичный
ТЫ	Кросс-платформенный
Лицензия	МОЯ лицензия
Расширения имен файлов	.styl
Веб-сайт	Стилус ( GitHub )
Под влиянием
CSS , Sass , Меньше

Stylus динамических таблиц стилей — это язык препроцессора , который компилируется в каскадные таблицы стилей (CSS). Его дизайн создан под влиянием Sass and Less . Он считается четвертым наиболее часто используемым синтаксисом препроцессора CSS. Его создал Ти Джей Холовайчук, бывший программист Node.js и создатель языка Luna . Он написан JADE и Node.js. на

Селекторы

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

body {
    color: white;
}

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

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;
}

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

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

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

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

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

div.rectangle 
  border-radius(10px)

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

div.rectangle {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

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

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

 -webkit-{'border' + '-radius'}

оценивается как

-webkit-border-radius

Внешние ссылки

• Официальный сайт
• Репозиторий исходного кода Stylus (Git)
• Сравнение исходного кода с Sass/SCSS и Less
• Онлайн-компилятор Stylus