1 Червень 2014
Рубрика: уроки

Руководство по SASS. Как верстать сайты в два раза быстрее?

Любой верстальщик рано или поздно понимает, что сотни строк кода превращаются из поэзии в рутину. Вернуть былую легкость вашему CSS может Sass. Это простой и легкий способ бросить программировать по ночам и работать как нормальный человек.

Что такое Sass и зачем он нужен

Sass (Syntactically Awesome Stylesheets) — это скриптовый метаязык, который компилируется в обычные CSS-стили. Если вы хорошо знакомы с CSS+HTML, то с SASS разберетесь за несколько дней. Все, кто сталкивается с CSS размером больше 500 строк, имеют дело с головной болью на тему того, как бы его упростить. Увы, со времен разработки стандартов каскадных стилей их структура кардинально не менялась. Требования к верстке, кому я буду врать, — усложнились в разы. Если когда-то 50-70 строчек стилей могли оформить простой сайт, то сегодня такого объема хватит разве что на header. Да и то — только на мой :).

В 2007-м появилась первая версия SASS, разработанная Гемптоном Кетлином. Не думаю, что простой набор правил и примитивный компилятор задумывались тогда как одни из основных инструментов фронтенд-мастеров и верстальщиков современного интернета.

Расширения SASS-файлов могут быть .sass и .scss — это зависит от выбранного синтаксиса. Браузер, впрочем, не понимает ни одного из них, поэтому для взаимопонимания нужно использовать компилятор. Его задача — привести SASS в понятный классический CSS, который будет распознан любым браузером. Даже шестым эксплорером на конной тяге.

Роль компилятора может выполнять серверный js или программа, установленная у вас на рабочей машине и мониторящая изменения в рабочих файлах.

Какие бывают синтаксисы в Sass

У языка есть два основных “начертания”: SASS и более новый SCSS. Отличия между ними небольшие, тем не менее нарушение правил синтаксиса не позволит скомпилировать файл. В SASS-синтаксисе нет фигурных скобок, вложенность элементов в нем реализована при помощи отступов, а стилевые правила обязательно отделены новыми строками.

Независимо от синтаксиса, SCSS обратно совместим с CSS. То есть любой CSS обязательно будет валидным SCSS-кодом.

Из-за отсутствия скобок и точек с запятой обратной совместимости у SASS-синтаксиса с CSS нет.

Выгоды Sass

Вначале раскажу в двух словах и далее чуть подробнее. Мне в CSS всегда не хватало переменных и мешали хаки для кроссбраузерности. Ниже на примерах вы увидите, что SASS решает эти две проблемы блестяще.

Переменные (variables)

Sass позволяет назначать переменные — и это одно из ключевых преимуществ. Переменная, по аналогии с php, начинается со знака доллара ($), значения присваиваются при помощи двоеточия. Переменные в Sass можно разделить на 4 типа:

  1. число (int)
  2. строка (string)
  3. логический тип (да/нет, boolean)
  4. цвета (имя, имена)

Приведу простой пример, после которого статья потеряет актуальность, потому как вам станет все ясно и вы сможете сами все понять.

SCSS-синтаксис

$blue: #3bbfce; /* цвет */
$margin: 16px; /* отступ */
$fontSize: 14px; /* размер текста */

.content {
	border: 1px solid $blue; /* синий бордюр */
	color: darken($blue, 20%); /* затемнение цвета на 20% */
}

.border {
	padding: $margin / 2;
	margin: $margin / 2;
	border-color: $blue;
}

SASS-синтаксис

$blue: #3bbfce
$margin: 16px
$fontSize: 14px

.content
	border: 1px solid $blue
	color: darken($blue, 20%)

.border
	padding: $margin / 2
	margin: $margin / 2
	border-color: $blue

Результат в CSS

.content {
	border: 1px solid #3bbfce;
	color: #217882; 
}

.border {
	padding: 8px;
	margin: 8px;
	border-color: #3bbfce; 
}

Как видите, в результате мы получаем обычный CSS. Поехали дальше.

Вложенные правила (nesting)

Я бы Sass выучил только за то, что в нем есть нестинги. Это значительно упрощает редактирование стилей и навигацию по рабочему файлу стилей.

SCSS

nav {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li { display: inline-block; }

	a {
		display: block;
		padding: 6px 12px;
		text-decoration: none;
	}
}

CSS

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	display: inline-block;
}

nav a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
}

Вам больше не придется следить за вложенностью элементов и правильностью наследования классов. Визуально вложенные в Sass внутрь родительского элемента правила будут сохранены с той же иерархией с учетом правил CSS.

Дополнения (mixin)

Правило DRY (Don’t Repeat Yourself) реализовано в Sass при помощи техники mixin. Те куски кода, которые в CSS обычно вам приходилось дублировать, здесь можно сохранить в отдельной переменной и вставлять в нужных местах. Компилятор, встретив такую переменную, сохранит вместо нее нужный кусок кода.

Sass

@mixin table-base {
	th {
		text-align: center;
		font-weight: bold;
	}
	td, th {
		padding: 2px
	}
}
 
#data {
	@include table-base;
}

CSS

#data th {
	text-align: center;
	font-weight: bold;
}
#data td, #data th {
	padding: 2px;
}

Аргументы (arguments)

Дополнения умеют менять код в зависимости от передаваемых им аргументов. Например, кроссбраузерную обводку с хаками можно уместить в одну строку.

SASS

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

.box-1 { 
	@include border-radius(10px); 
}

.box-2 { 
	@include border-radius(5px); 
}

CSS

.box-1 {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}

.box-2 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

Наследование (extend)

Создав однажды любое правило, мы можем использовать его внутри другого. Наследуемый элемент получит все свойства исходного класса, которые мы можем дополнить любыми другими.

Sass

.error {
	border: 1px #f00;
	background: #fdd;
}
.error.intrusion {
	font-size: 1.3em;
	font-weight: bold;
}
 
.badError {
	@extend .error;
	border-width: 3px;
}

CSS

.error, .badError {
	border: 1px #f00;
	background: #fdd;
}
 
.error.intrusion,
.badError.intrusion {
	font-size: 1.3em;
	font-weight: bold;
}
 
.badError {
	border-width: 3px;
}

Эти простые возможности увеличивают скорость верстки и не дают потеряться в куче кода. Во всяком случае, мне. Полезно запомнить, что вся документация по SASS есть на офсайте языка с примерами и подробным описанием (на английском).

Компиляторы

Программы-компиляторы проверяют ваши .scss и .sass-файлы на изменения и автоматически компилируют из них готовые стили. Выбрать есть из чего — вот варианты, которые советуют разработчики:

В результате

Пользоваться Sass или нет? Если хотите сэкономить время и силы, то однозначный ответ — “да”. Это удобное и очень простое решение для ускорения разработки сайтов. Как это обычно бывает с “внезапно все понявшими”, уже через неделю ваше отношение с “Назар опять насоветовал непонятно что” сменится на “ух ты, как я раньше без этого жил?”.

А вы как, пользуетесь Sass? Нравится?

Обновление от 2015-09-04: Mixture стал бесплатным.

Тепер я хочу бачити коментарі 45