Stylus - это язык препроцессора динамических таблиц стилей, который скомпилирован в каскадные таблицы стилей (CSS). На его дизайн повлияли Sass и LESS . Он считается четвертым по популярности синтаксисом препроцессора CSS. [3] Его создал Т. Дж. Головайчук, бывший программист Node.js и создатель языка Luna. Она написана в JADE и Node.js .
Разработано | Т.Дж. Головайчук |
---|---|
Разработчик | LearnBoost (29 марта 2011 г. - 26 марта 2015 г. ) / Automattic (26 марта 2015 г. - настоящее время) [1] |
Впервые появился | 2010 |
Стабильный выпуск | 0.54.8 [2] / 16 июля 2020 г . |
Печатная дисциплина | динамичный |
Операционные системы | Кроссплатформенность |
Лицензия | Лицензия MIT |
Расширения имени файла | .styl |
Веб-сайт | Стилус ( Github ) |
Под влиянием | |
CSS , Sass , МЕНЬШЕ |
Селекторы
В отличие от CSS, в котором для открытия и закрытия блоков объявления используются фигурные скобки, используется отступ. Кроме того, точки с запятой (;) необязательно опускаются. Следовательно, следующий CSS:
корпус { цвет : белый ; }
можно сократить до:
цвет корпуса : белый
Кроме того, двоеточие (:) и запятые (,) также необязательны; это означает, что приведенное выше можно записать как
цвет корпуса белый
Переменные
Stylus позволяет определять переменные, однако, в отличие от LESS и Sass, он не использует символы для определения переменных. Кроме того, присвоение переменной выполняется автоматически путем разделения свойства и ключевого слова (-ей). Таким образом, переменные аналогичны переменным в Python .
message = 'Привет, мир!'div :: before цвет сообщения содержимого # ffffff
Компилятор Stylus переведет приведенный выше документ на:
div :: before { content : 'Hello, World!' ; цвет : #ffffff ; }
Миксины и функции
И миксины, и функции определяются одинаково, но применяются по-разному.
Например, если вы хотите определить свойство радиуса границы CSS без использования различных префиксов поставщика, вы можете создать:
border-radius ( n ) -webkit-border-radius n -moz-border-radius n Граничный радиус n
затем, чтобы включить это как миксин, вы должны ссылаться на него как:
div . радиус границы прямоугольника (10 пикселей )
это будет компилироваться в:
div . прямоугольник { -webkit- border-radius : 10 пикселей ; -moz- радиус границы : 10 пикселей ; радиус границы : 10 пикселей ; }
Интерполяция
Чтобы включить переменные в аргументы и идентификаторы, они должны быть заключены в фигурные скобки. Например,
-webkit- { 'граница' + '-радиус' }
оценивает
-webkit-border-radius
Рекомендации
- ^ «ЛИЦЕНЗИЯ» . GitHub . 2015-03-26 . Проверено 21 декабря 2015 .
- ^ «Релиз 0.54.8» . GitHub . 2020-07-16 . Проверено 6 апреля 2021 .
- ^ Результаты опроса: популярность препроцессоров CSS