Препроцессоры 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)	отступы, правила разделаются новой строкой
Примеси (миксины)
Логика	Условия, циклы, рекурсии - на низком уровне	Настоящее программирование	Настоящее программирование

Страница сравнения синтаксиса

cascading.styl

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

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;
  }
}

• Отличные примеры
• keyframes

Браузерные префиксы 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.styl

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

• Англ. сравнение
• Как правильно использовать переменные в препроцессорах LESS и SASS
• Установка SASS