Стилус (язык таблицы стилей)
 | Эту статью , возможно, придется переписать, Википедии чтобы она соответствовала стандартам качества . ( февраль 2015 г. ) |
 | |
| Разработано | Ти Джей Головайчук |
|---|---|
| Разработчик | LearnBoost (29 марта 2011 г. - 26 марта 2015 г. ) / Automattic (26 марта 2015 г. - настоящее время) [1] |
| Впервые появился | 2010 г |
| Стабильная версия | 0.63.0 [2] / 5 марта 2024 г |
| Дисциплина набора текста | динамичный |
| ТЫ | Кросс-платформенный |
| Лицензия | МОЯ лицензия |
| Расширения имен файлов | .styl |
| Веб-сайт | Стилус ( GitHub ) |
| Под влиянием | |
| CSS , Sass , Меньше | |
Stylus динамических таблиц стилей — это язык препроцессора , который компилируется в каскадные таблицы стилей (CSS). Его дизайн создан под влиянием Sass and Less . Он считается четвертым наиболее часто используемым синтаксисом препроцессора CSS. [3] Его создал Ти Джей Холовайчук, бывший программист 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Ссылки
[ редактировать ]- ^ «ЛИЦЕНЗИЯ» . Гитхаб . 26 марта 2015 г. Проверено 21 декабря 2015 г.
- ^ «Примечания к выпуску» . Гитхаб . 05.03.2024 . Проверено 06 апреля 2021 г.
- ^ Результаты опроса: популярность препроцессоров CSS
Внешние ссылки
[ редактировать ]- Официальный сайт
- Репозиторий исходного кода Stylus (Git)
- Сравнение исходного кода с Sass/SCSS и Less
- Онлайн-компилятор Stylus
 | Эта языкам программирования, статья, посвященная незавершена . Вы можете помочь Википедии, расширив ее . |