Препроцессоры CSS

Сравнение препроцессоров CSS

LESS vs SASS vs Stylus:

Показатель LESS SASS Stylus
Последняя версия 2.7.2 (готовится 3.0) 3.5.1 0.54.5
Математические выражения :+: :+: :+:
Переменные @var $var var, $var
Каскады стилей Вложенные блоки в { ... }, правила разделаются ; Вложенные блоки в { ... } (SCSS), отступы (Sass), правила разделаются ; (SCSS), новой строкой (Sass) отступы, правила разделаются новой строкой
Примеси (миксины) :+: :+: :+:
Логика Условия, циклы, рекурсии - на низком уровне Настоящее программирование Настоящее программирование

Особенности

Каскады стилей

Sass / Stylus

cascading.styl
.menuitem
  display: block
.menu 
  .item
    @extend .menuitem

Media queries

Stylus

media.styl
mobile = 'screen and (max-width: 700px)'
 
.block-1
  .block-2
    @media screen and (max-width: 700px)
      width: 10px
    @media mobile
      width: 20px
 
@media mobile
  .block-1
    .block-2
      width: 30px

Результат:

@media screen and (max-width: 700px) {
  .block-1 .block-2 {
    width: 10px;
  }
}
@media screen and (max-width: 700px) {
  .block-1 .block-2 {
    width: 20px;
  }
}
@media screen and (max-width: 700px) {
  .block-1 .block-2 {
    width: 30px;
  }
}

Подробности

Stylus

Миксины

Браузерные префиксы Nib и CSS3

Стили if ie для IE внутри обычных конструкция для всех браузеров:

if-ie.styl
.foo
  box-shadow: 0 0 3px #000
  border: 1px solid #000 if ie

Экранирование

unquote.styl
body
  foo: unquote('MS:WeirdStuff(opacity=1)')

Переменные

var.styl
#prompt
  position: absolute
  top: 150px
  left: 50%
  width: w = 200px
  margin-left: -(w / 2)

или:

width: 200px
margin-left: -(@width / 2)

Итерация

iteration.styl
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row

Программирование

program.styl
vendors = webkit moz o ms official
 
border-radius()
  for vendor in vendors
    if vendor == official
      border-radius: arguments
    else
      -{vendor}-border-radius: arguments
#content
  border-radius: 5px
function.styl
sum(nums...)
  n = 0
  n += num for num in nums
 
body
  foo: sum(1, 2, 3)
function-arguments.styl
fade-out(color, amount = 50%)
  color - rgba(0,0,0,amount)
 
body
  foo: fade-out(#eee)
  foo: fade-out(#eee, 20%)
  foo: fade-out(#eee, amount: 50%)
  foo: fade-out(color: #eee, amount: 50%)
  foo: fade-out(amount: 50%, #eee)
  foo: fade-out(amount: 50%, color: #eee)

Операторы

operators.styl
body
  foo: 5px + 10
  foo: 2 ** 8
  foo: 5px * 2
  foo: !!''
  foo: foo and bar and baz
  foo: foo or bar or baz
  foo: 1..5
  foo: 1...5
  foo: 'foo' is a 'string'
  foo: (1 2 3) == (1 2 3)
  foo: (1 2 3) == (1 2)
  foo: ((one 1) (two 2)) == ((one 1) (two 2)) 
  foo: ((one 1) (two 2)) == ((one 1) (two)) 
  foo: ((one 1) (two 2))[0]
  foo: 3 in (1 2 3 4)

Приведение типов

types.styl
body
  foo: foo + bar
  foo: 'foo ' + bar
  foo: 'foo ' + 'bar'
  foo: 'foo ' + 5px
  foo: 2s - 500ms
  foo: 5000ms == 5s
  foo: 50deg

sprintf

sprintf.styl
body
  foo: '%s / %s' % (5px 10px)
  foo: 'MS:WeirdStuff(opacity=%s)' % 1
  foo: unquote('MS:WeirdStuff(opacity=1)')

Ссылки