Что такое 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 Комментарий на "Руководство по SASS. Как верстать сайты в два раза быстрее?"

    Уведомлять
    avatar
    5000
    feuer81
    Гость

    В чем может быть проблема: в Sublime при добавлении инструкции в SASS если не добавляю точки с запятой – ST выдает ошибку http://take.ms/tGY6IW
    вот что ввел в файл main.sass
    body
    background-color: #f00
    font-size: 18px
    min-width: 320px
    position: relative
    line-height: em(30px)
    Как только добавляю точки с запятой – все компилируется…

    Сергей
    Гость

    Единственное полезное для работы, что я тут реально увидел – это вложенности.Не могу понять смысла переменных, мне что должно быть легче писать это?
    $margin: 100px;
    .wrap
    width: $margin/2;
    чем width: 50px;
    И вообще смысл переменных, если например цвет я беру сразу фотошопа, или я например имея в переменной синий цвет, должен на глаз определить оттенок синего цвета в макете, пробуя его разбавить на 20%?

    Дамир
    Гость

    Привет, решил начать пилить проекты на Sass, заного перечитал статью, есть непонятки с наследованием:
    например у тебя есть код
    .error {
    border: 1px #f00;
    background: #fdd;
    }
    .error.intrusion {
    font-size: 1.3em;
    font-weight: bold;
    }
    .badError {
    @extend .error;
    border-width: 3px;
    }
    который превращается в:
    .error, .badError {
    border: 1px #f00;
    background: #fdd;
    }
    .error.intrusion, .intrusion.badError {
    font-size: 1.3em;
    font-weight: bold;
    }
    .badError {
    border-width: 3px;
    }

    По этому “.error, .badError” понятно, но откуда взялось вот это: “.error.intrusion, .intrusion.badError”
    .error.intrusion – это ?

    THEA
    Гость

    Спасибо за статью, очень пригодилась. Сначала не понимал, в чем собственно вся прелесть SASS, даже бросил и стал верстать на чистом CSS, по старинке. Потом попробовал SASS еще раз (боже, говорю, как нарик) и втянулся, реально код проще и удобнее, я имею в виду код SASS. Конечно, еще попрактиковаться надо, но в целом я уже понял к чему стремиться! :)

    Дамир
    Гость

    Крутая статья, спасибо!
    “Обновление от 2015-09-04: Mixture стал бесплатным.” – микстуре теперь скачать нельзя вообще :(

    Роман
    Гость

    Можно убрать расизм – “и работать как белый человек”?

    Игорь Чишкала
    Гость

    @Роман, это все, что заинтересовало вас в этой статье? :)
    N.B. Автору большое спасибо.

    Пако
    Гость

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

    1
    Гость
    Андрей
    Гость

    Mixture теперь бесплатный, но не будет активно развиваться. http://mixture.io/

    Андрей
    Гость

    Уроки хорошие. Спасибо.
    P.S. Раньше для верстки было достаточно знания CSS, наличие хорошего текстового редактор, да пару тройку броузеров. А теперь установи то, изучи это. Как все успеть!?

    oldmemory.ru
    Гость

    Хорошая вещь, упрощает сложные проекты

    Вася
    Гость

    Отдаю предпочтения less, он как-то больше по душе : )

    Иуда
    Гость

    Ничего полезного не увидел. Преимущество, как не крути, в старом добром CSS. А древние браузеры давно уже остались в истории человечества. И то, что нужна какая то совместимость с IE6, 7 или 8 это мифические сказы. Этим хламом уже давно никто не пользуются, а если и пользуются, то те кому абсолютно не важно какой у вас сайт!

    Иуда
    Гость

    @Назар Токарь, согласен Мастер, но считаю , что главный минус SASS, это не умение работать напрямую как CSS. Он компилирует код в CSS-файл с помощью командной строки или плагинов для фреймворка. Это не только сыро, но и не совсем удобно. Например невозможно налету внести изменения в код с помощью SASS. Налету, это значит найти на рабочем сайте косяк в Firebug и затем быстро его исправить без всяких консолей в CSS-файле. Less, Saсs…. одним словом нужно дождаться более совершенного решения без действий-посредников, решения, которое будет родным для браузеров и таким же понятным и удобным как широко раскручиваемое SAСS.

    mimo
    Гость

    @Иуда, Мы тут занимаемся веб-разработкой, а не пирожки печем, поэтому либо вы полюбите консоль, либо всю жизнь будете быдлокодером. Не сочтите за попытку задеть.

    Вяачеслав
    Гость

    Данный метод ускоряет верстку но не ее качество!
    самая большая головная боль это КАСКАДЫ и их большое кол-во! Как по мне использование методологии БЭМ и ООЦСС это будущее верстки больших проектов а не препроцессоров которые помогают верстальщику наплодить кучу говнокода с которым трудно работать!

    Алексей
    Гость

    Давно хотел понять принцип работы с SASS, очень просто написано. Спасибо. Буду изучать.

    Юрий
    Гость

    Благодарствую, полезная статья и очень вовремя!

    Николай
    Гость

    Еще про stylus напишите)

    Антоша буржуй
    Гость

    @Назар Токарь, вообще считаю что кодить удобнее на Linux да и Софт у него бесплатный это я про compass и тд

    web11
    Гость

    Спасибо за статью!
    как раз вовремя, сейчас закончу с bootstrap и начну sass пробовать :)

    Антоша буржуй
    Гость

    @web11, попробуй sass в bootstrap они вроде дают такую возможность.

    web11
    Гость

    @Назар Токарь, было бы круто :)
    у вас хорошо получается материал подавать

    Роман
    Гость

    Сначала перепутал с SAAS =))) Вот про saas бы написал. только я нифига не понял в чем удобство то? В CSS уже все знаешь…а тут только времени сколько нужно убить на изучение.

    Юрий
    Гость

    @Роман, да и я в этом ничего не нахожу, в sublime text есть куча плагинов которые облегчают работу с самими ксс… и не думаб что sass сможет настолько же ускорить работу.

    Илья
    Гость

    @Юрий, в sublime text 2 которые облегчают работу и с SASS, LESS.

    давно знаю что это такое, вот руки дошли на изучение, а тут и изучать нечего, как два пальца обосрать =)

    wpDiscuz