Що таке 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 (Do not 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 стал безкоштовним.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
Ярослав

Підкажіть, будь-ласка, як застосовувати SASS при завантаженні проекту на сервер? це виконується готовим CSS чи на сервері повинен бути компілятор?

Ярослав

маю на увазі скоріш не “виконується”, а “реалізується в форматі” =)

Назар Токар

Ні, компілятор створює CSS локально і ви завантажуєте готові до роботи CSS-файли.

Игорь

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

dinmukhamed

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

Никита

в gulpfile.js в корне прописываете таск с командой ‘watch’.
gulp.task(‘watch’, function(){ Эта строка название таски
gulp.watch(‘app/sass/**/*.sass’, [‘sass’]); Эта строка функция автоматического отслеживания изменений
});

Тогда начнется автоматическое отслеживание изменений.Правки будут автоматически вноситься при любом изменении из main.sass в main.css.

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)
Как только добавляю точки с запятой – все компилируется…

Назар Токар

Думаю, проблема у відсутності крпаки з комою :). Я користуюсь 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 объединяет одинаковые стили в селекторы, это уменьшает общий вес кода и помогает избегать дублирования.

THEA

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

Назар Токарь

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

Дамир

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

Назар Токарь

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

Такие дела.

Роман

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

Назар Токарь

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

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

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

Пако

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

Назар Токарь

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

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

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

1

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

Андрей

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

Назар Токарь

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

Андрей

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

Назар Токарь

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

oldmemory.ru

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

Вася

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

Назар Токарь

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

Иуда

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

Назар Токарь

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

Иуда

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

Назар Токарь

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

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

mimo

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

Вяачеслав

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

Назар Токарь

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

Для тех, кто умеет и любит оптимизровать, есть UnCSS для Grunt, который умеет удалять хвосты и неиспользуемые правила из CSS.

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

Алексей

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

Юрий

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

Николай

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

Назар Токарь

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

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

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

web11

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

Назар Токарь

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

web11

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

Назар Токарь

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

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

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

Назар Токарь

@Антоша буржуй, да, у Bootstrap раздел есть в мануале на эту тему.

Роман

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

Назар Токарь

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

Юрий

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

Илья

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

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