Назар Токар
Опубліковано: 1 Червня 2014
Оновлено: 8 Травня 2017

Что такое 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 стал бесплатным.

← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    47 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

    Здравствуйте! В первую очередь - спасибо за статью, очень просто и полезно.
    Подскажите пожалуйста ресурс для более глубоко изучения sass (книги статьи сайты). Если можете продублируйте ответ на почту.
    Спасибо!

    Здравствуйте) как вы наблюдаете за изменением во время верстки при написании стили sass?) так как браузер не будет понимать что вы пишете. мне очень интересна эта тема, так как это удобно) но факт того что писать код на болшие сайты нужно смотреть на изменение, и возможные оплошности. Ответьте пожалуйста)))

    В чем может быть проблема: в 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)

    Как только добавляю точки с запятой - все компилируется...

    Автор
    Назар Токар

    Думаю, проблема у відсутності крпаки з комою :). Я користуюсь SCSS-синтаксисом і завжди їх ставлю, тож такого не бачив. Це може бути налаштування автопрефіксера, він чекає на закінчення строк із крапкою з комою, але не бачить, і видає помилку, а сам ST працює як і повинен.

    Единственное полезное для работы, что я тут реально увидел - это вложенности.Не могу понять смысла переменных, мне что должно быть легче писать это?

    $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 - это ?

    Автор
    Назар Токар

    Sass объединяет одинаковые стили в селекторы, это уменьшает общий вес кода и помогает избегать дублирования.

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

    Автор
    Назар Токар

    Теперь вы уже не станете прежним :)

    Крутая статья, спасибо!

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

    Автор
    Назар Токар

    Пришло время отключить скачивание и порекомендовать вам пользоваться альетранивами. Например, Gulp или Grunt.

    Такие дела.

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

    Игорь Чишкала

    @Роман, это все, что заинтересовало вас в этой статье? :)

    N.B. Автору большое спасибо.

    Автор
    Назар Токар

    @Роман, убрал :)

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

    Автор
    Назар Токар

    @Пако, SASS даст не меньший толчок в развитии, он удобен (лично мне) для любых проектов. Было недавно, что нужно было поправить готовый CSS и я по привычке писал SASS, а потом удивился, что он не работает.

    А потом понял, что он же нескомпилированный :).

    Так что однозначное "да" — SASS это быстро, удобно и очень быстро.

    Полезная штука

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

    Автор
    Назар Токар

    @Андрей, и правда. Спасибо, обновил статью.

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

    Автор
    Назар Токар

    Для того, чтобы все успевать, и были придуманы фреймворки и препроцессоры. Они сильно упрощают разработку :) успехов в изучении!

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

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

    Автор
    Назар Токар

    @Вася, разными путями можно идти к отсутствию головной боли, падаван юный :).

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

    Автор
    Назар Токар

    @Иуда, про старые версии браузеров если речь и идет, то очень вскользь. Основная выгода SASS для меня это ускорение разработки и упрощение контроля кода. Если у вас сайт на 5 страниц, то возможно выгода будет небольшой. Другое дело когда идет речь о крупных проектах.

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

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

    Автор
    Назар Токар

    @Иуда, не совсем так. SASS создает map исходника и в инспекторе Chrome можно увидеть строку, в которой находится стиль не в скомпилированном файле, а в исходнике, в .scss. Это очень удобно. Если ваш компилятор отслеживает изменения и компилирует файл автоматически, то фактически это и есть изменения на лету.

    А если пользоваться Live Reload, то даже можно обновлять автоматически страницу или стили в ней при изменениях файла. А это уже очень удобно.

    Вяачеслав

    Данный метод ускоряет верстку но не ее качество!

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

    Автор
    Назар Токар

    @Вяачеслав, так а что мешает в обыном css наплодить кучу глупого кода, сделать его несемантичным и потратить все полимеры? Пользуйтесь инструментом, если умеете.

    Для тех, кто умеет и любит оптимизровать, есть https://github.com/addyosmani/grunt-uncss" rel="nofollow">UnCSS для Grunt, который умеет удалять хвосты и неиспользуемые правила из CSS.

    Когда он научится не трогать динамические стили, ему вообще цены не будет.

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

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

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

    Автор
    Назар Токар

    @Николай, интересная штука, но фактически это смесь LESS и SCSS, суть ведь одна и та же :).

    Антоша буржуй

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

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

    Антоша буржуй

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

    Автор
    Назар Токар

    @Антоша буржуй, да, у Bootstrap http://getbootstrap.com/css/#less" rel="nofollow">раздел есть в мануале на эту тему.

    Автор
    Назар Токар

    @web11, точно, и по бутстрапу тоже надо будет написать мануал :)

    @Назар Токарь, было бы круто :)

    у вас хорошо получается материал подавать

    Автор
    Назар Токар

    @web11, спасибо. Пока пишешь о чем-то, и сам учишься :)

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

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

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

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

    Автор
    Назар Токар

    @Роман, перепутали совсем с другим :). Удобно, потому что упрощает разработку. Учится быстро и потом одни плюсы.