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

Перейти к навигацииПерейти к поиску
Stylus
Изображение логотипа
Класс языкаЯзык описания стилей, язык программирования и язык, использующий отступы[вд]
Появился в2011
Расширение файлов.styl
Выпуск
Испытал влияниеCSS, LESS и Sass
Лицензиялицензия MIT[2]
Сайтstylus-lang.com (англ.)
ОСкроссплатформенность

Stylus — препроцессор CSS языка с SASS-подобным синтаксисом и возможностью использовать математические операции, примеси, функции, переменные, циклы и условия.

Для синтаксиса характерно использование отступов вместо скобок и отсутствие точек с запятой.

Основные конструкции языка

Математические операции

Миксины

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

form input[type=button]
  border-radius(5px)

транформруется в 

form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Функции

 body 
   padding add(10px, 5)

трасформируется в 

body {
   padding: 15px;
 }

Переменные

font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font, sans-serif

трансформируется в… 

body {
  font: 14px "Lucida Grande", Arial, sans-serif;
}

первый font — название правила, второй — переменная, включающая в себя еще другую переменную (font-size)

Циклы и условия

Примечания

  1. ↑ Release 0.63.0 — 2024.
  2. ↑ https://github.com/LearnBoost/stylus/blob/master/LICENSE

Ссылки