Войти
 | |
| Разработано | Т.Дж. Головайчук |
|---|---|
| Разработчик | LearnBoost (29 марта 2011 г. - 26 марта 2015 г.) / Automattic (26 марта 2015 г. - настоящее время) ( 2011-03-29 ) ( 2015-03-26 ) ( 2015-03-26 ) |
| Впервые появился | 2010 ; 11 лет назад ( 2010 ) |
| Стабильный выпуск | 0.54.8 / 16 июля 2020 г. ; 8 месяцев назад ( 2020-07-16 ) |
| Печатная дисциплина | динамичный |
| Операционные системы | Кроссплатформенность |
| Лицензия | Лицензия MIT |
| Расширения имени файла | .styl |
| Веб-сайт | Стилус ( Github ) |
| Под влиянием | |
| CSS, Sass, МЕНЬШЕ | |
Stylus - это язык препроцессора динамических таблиц стилей, который скомпилирован в каскадные таблицы стилей (CSS). На его дизайн повлияли Sass и LESS. Он считается четвертым по популярности синтаксисом препроцессора CSS. Его создал TJ Holowaychuk, бывший программист 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
