SCSS — немного практики, часть I

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS — «диалект» языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, @each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся «про запас».

Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:

$blue: #3bbfce

$margin: 16px

.content-navigation

  border-color: $blue

  color: darken($blue, 9%)

.border

  padding: $margin / 2

  margin: $margin / 2

  border-color: $blue

И тоже самое на SCSS:

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color: darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

Read more: Habrahabr.ru

QR: 

Posted via email from Jasper-net