SCSS — новая порция глазури от Sass

Последнее время я практически не занимался версткой, и пропустил выход Sass3, в котором реализовано расширение SCSS (Sassy CSS). Это именно расширение для CSS без «искажения» синтаксиса — то есть любой валидный CSS документ является и полностью валидным SCSS документом. В посте я проведу сравнение с уже существующими препроцессорами такими как Sass и Less. О которых уже писалось на хабре: Sass, Less. Но та информация немного устарела: в частности изменился синтаксис Sass.

Введение

Самым первым из препроцессоров был создан Sass, многих он напугал своим синтаксисом, хотя бы тем, что правила указывались с двоеточиями в начале. Это была своеобразная дань типу Symdol в Ruby, но ведь CSS код пишут не программисты на Ruby. Поэтому группой энтузиастов был создан Less, возможности Sass (Перменные, Mixins, Наследование, Арифметика) + нативный синтаксис. Позже команда Sass изменило синтаксис и создала SCSS. Также как и Less это был язык с синтаксисом CSS и возможностями Sass.

Ниже приведен список возможностей и их реализация на каждом из препроцессоров.

Переменные

Sass

$blue: #3bbfce
$margin: 16px
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue


Less

@brand_color: #4D926F;
#header {
  color: @brand_color;
}


SCSS

$blue: #3bbfce;
$margin: 16px;
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Из кода, в принципе, понятно как можно использовать переменные. От себя лишь замечу, что их действительно удобно использовать для присваивания цветов. Когда в проекте решат изменить какой-нибудь цвет — для вас не составит труда поменять значение одной переменной.

Наследование

CSS

table.hl {
  margin: 2em 0;
}
  table.hl td.ln {
    text-align: right;
  }


Less/SCSS

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}


Sass

table.hl
  margin: 2em 0
  td.ln
    text-align: right

По моему, наследование это здорово.

Mixins

CSS

Подмешывание в рамках CSS — это просто создание класса который будет присвоен нескольким HTML элементам.
Пример с clearfix:

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

<div class="clearfix">


Less

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded_corner;
}
#footer {
  .rounded_corners(10px);
}


SCSS

@mixin rounded_corners ($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
#footer {
  @include rounded_corners(10px);
}

Sass

@mixin rounded_corners ($radius)
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius
#footer
  @include rounded_corners(10px)


Как мы видим в mixin можно передавать параметр, что порой может быть очень полезно.

Арифметика

Less

@the-border: 1px;
#header {
  border-left: @the-border;
  border-right: @the-border * 2;
}

SCSS

$the-border: 1px;
#header {
  border-left: $the-border;
  border-right: $the-border * 2;
}

Sass

$the-border: 1px
#header
  border-left: $the-border
  border-right: $the-border * 2


Это самый примитивный пример. Я думаю у вас уже есть несколько вариантов где это можно применить.

Вывод

Как мы видим синтаксис Less, SCSS схож с синтаксисом CSS, и в этих препроцессорах лишь ненавязчиво предоставляются дополнительные плюшки, но немного по разному. Например переменные и mixins объявляются разными способами. В свою очередь Sass и Less сжожи между собой по синтаксису только в Sass блоки правил селектора формируются отступами, а не кавычками, а также нет точек с запятой в конце строк. Я считаю, что это отличная замена, она позволяет экономить по строке на каждом блоке.

Препроцессоры распространяются в виде джемов для Ruby.

SCSS, Sass
  gem install haml

Less
  gem install less