SASS что это?

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

Это в свою очередь приводит к тому, что в такой таблице уже сложней ориентироваться и написание новых стилей может стать для вас настоящей рутиной.

Если вы сталкиваетесь с подобной проблемой, то я вам советую посмотреть в сторону препроцессора Sass.

Что такое SASS?

SASS - это язык на основе CSS, предназначенный для упрощения файлов каскадных таблиц стилей.

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

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

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

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

Синтаксис SASS

Язык имеет два синтаксиса: SASS и SCSS. В зависимости от того, какой синтаксис используется, создается файл с расширением либо sass, либо scss.

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

По всем этим причинам мы с вами будем использовать всегда именно SCSS-синтаксис и где бы вы не встретили на моем блоге термин SASS, знайте, что под ним я подразумеваю использование именно SCSS-синтаксиса.

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

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

Ниже я привел небольшой код на SASS, как вы можете создавать и использовать переменные.

Код на SASS (используется SCSS-синтаксис)

$mainColor: #4c69ba;
$padding: 14px;

.wrapper {
    background: $mainColor;
}

.column {
    padding: $padding / 2;
    border: 2px solid $mainColor;
}

Как видите сперва мы создали три переменных.

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

Объявив переменные, мы теперь можем спокойно использовать их в нашем коде.

После компиляции SASS в CSS, мы получим:

Результат на CSS

.wrapper {
	background: #4c69ba;
}

.column {
	padding: 7px;
	border: 2px solid #4c69ba;
}

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

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

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

SCSS

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

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 8px 14px;
		text-transform: uppercase;
	}
}

Компилятор всю работу сделает за вас.

Результат на CSS

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

nav li {
	display: inline-block;
}

nav a {
	display: block;
	padding: 8px 14px;
	text-transform: uppercase;
}

Миксины (mixin)

Если в CSS, некоторые куски кода нам приходилось дублировать, то в SASS вы можете данный код вынести в специальный миксин и далее уже использовать сколько угодно раз.

SCSS

@mixin centerBlock() {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wrapper {
	@include centerBlock();
}

Результат на CSS

.wrapper {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

Миксины с аргументами (arguments)

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

SCSS

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}
 
.first-rounded { 
    @include border-radius(5px); 
}
 
.second-rounded { 
    @include border-radius(10px);
}

Результат на CSS

.first-rounded {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.second-rounded {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

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

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

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

SCSS

.error {
	color: #f00;
}

.error-text {
	@extend .error;
	font-weight: bold;
}

Результат на CSS

.error, .error-text {
	color: #f00;
}

.error-text {
	font-weight: bold;
}

Компилятор SASS

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

Как установить компилятор для SASS, есть информация на официальном сайте.

Если бы вы хотели более подробный урок по установке и настройке SASS, то напишите об этом в комментариях, я обязательно запишу.

Подводим итог

SASS, да и вообще любые препроцессоры, за последние годы очень сильно набрали популярность, поэтому я считаю, что нужно стремиться идти в ногу со временем и начать внедрять SASS.

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

Если вам интересен SASS и вы бы хотели более подробно познакомиться с ним, то пожалуйста, поставьте лайк или оставьте комментарий к этой статье. По вашей обратной связи я уже смогу понять, стоит ли добавлять новые уроки на блог по данной теме.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (22)

Marina 1 декабря 2015 г. в 13:54

Интересная статья. Еще хочется попросить уроки по Boodstrap или что то похожее. Вы очень понятно для меня излагаете информацию. Как Вы адаптируете сайт под разные устройства?

Ответить

Евгений 27 ноября 2015 г. в 17:44

Статья интересная, понравилось. Тема довольно свежая и нужная.

Ответить

Шамиль 27 ноября 2015 г. в 22:31

Евгений, свежая? не сказал бы, используя уже года 4-5)))

Ответить

Сергей 27 ноября 2015 г. в 13:56

Александр. Работаю с Sass и использую егов работе. Конечно молодец что затронули эту тему, но хотел бы Вам посоветовать перед тем как что-то написать хорошо это изучить. К примеру, Вы написали "Язык имеет два синтаксиса: SASS и SCSS. В зависимости от того, какой синтаксис используется, создается файл с расширением либо sass, либо scss.
SCSS-синтаксис является наиболее новым и популярным на данный момент, также SCSS-синтаксис обратно совместим с обычным CSS, что нельзя сказать про SASS-синтаксис.
"

Могу с Вами сильно посмотрить. SASS был первым предпроцессором и его синтаксис был похож на Ruby И многих SASS напугал своим синтаксисом, хотя бы тем, что правила указывались с двоеточиями в начале. Дальше появился LESS и SASS. Позже команда Sass изменила синтаксис и создала SCSS. Также как и Less это был язык с синтаксисом CSS и возможностями Sass.Вот потому, сейчас, те кто пишет на Sass работает с файлами scss а не sass, так как верстальщики пишут свой код на css а не на Ruby 🙂

Ответить

Сергей 27 ноября 2015 г. в 13:57

немного ошибся "Дальше появился LESS с возможностями SASS. " - вот так правильно

Ответить

Сергей 26 ноября 2015 г. в 16:29

Добрый день. Александр! Тема очень интересная. Конечно, хотелось бы новых уроков на тему SASS и SCSS. Я как-то столкнулся с сайтом-генератором градиентов красивых, так там весь код был на SCSS написан. Программа-компилятор предлагалась koala. Что Вы о ней думаете? Хорошая? А за уроки Ваши большое спасибо - Вы очень понятно излагаете все наиболее важные вопросы, при этом мозг после ваших текстов не "закипает"))

Ответить

Дмитрий2 26 ноября 2015 г. в 15:19

Да, интересно. Если разберете создание html-странички средней степени сложности, созданной с помощью sass - я бы изучил. Не язык - 🙂 - но статью бы точно изучил. А то и видео, если бы прилагалось :)))

Ответить

Наталья 26 ноября 2015 г. в 11:58

Интересная статья)

Ответить

Алексей 26 ноября 2015 г. в 10:17

Интересно, запишите подробный видеоурок.

Ответить

arq12 25 ноября 2015 г. в 23:09

очень интересно и необходимо

Ответить

olzhas 25 ноября 2015 г. в 21:13

Конечно же делайте видео уроки, очень полезная штука))

Ответить

Сергей 25 ноября 2015 г. в 19:55

Александр, большое спасибо!
Информация очень ценная и поможет сэкономить время при верстке.

Ответить

Сергей 25 ноября 2015 г. в 18:09

Огромное спасибо. Очень давно искал статьи о SCSS к сожалению их очень мало и большинство на английском языке. Очень буду ждать Ваших видеоуроков по SCSS. Был бы Вам очень признателен за более подробное описание этой технологии. И вообще считаю, что Ваши видеоуроки одни из лучших. Спасибо Вам огромное.

Ответить

Сана 25 ноября 2015 г. в 17:46

Спасибо за подробное описание. Была бы еще более благодарна за видеоуроки. Надеюсь, что в скором времени они появятся.

Ответить

Alex 25 ноября 2015 г. в 14:26

Спасибо, Александр! Жду урок!

Ответить

Александр 25 ноября 2015 г. в 14:22

Здравствуйте. Очень интересно. Конечно же, хотелось бы более подробно узнать об этой технологии. Вы упомянули о намерении записать видеоурок? Это было бы замечательно

Ответить

Алик 25 ноября 2015 г. в 13:16

Спасибо большое, Александр. Я полностью увлекся Adobe Flash и ActionScript 3.0. Но все Ваши разработки собираю и просматриваю. Во-первых, все это интересно, умно и грамотно, а во-вторых, я надеюсь "вернуться" назад и воспользоваться всем этим богатством. Мне 66 лет, может и успею еще:)
Вы сподвижник и приносите людям пользу - и мне, в том числе. Я бы задал Вам кучу вопросов по web-строительству, но очень не хочу распыляться. Что изучаю сейчас, слишком много, слишком трудно и забирает все время. Спасибо еще раз...

Ответить

Alexei 25 ноября 2015 г. в 13:32

Алик, Не переживайте. Успеете.

Ответить

Евгений 25 ноября 2015 г. в 12:47

Однозначно это очень интересная и востребованная тема. Буду ждать уроков с нетерпением, желательно видеоуроков, где на конкретном примере будет показываться работа с препрцессорами.

Ответить

max 25 ноября 2015 г. в 12:15

Еще как интересно.

Ответить

Alexei 25 ноября 2015 г. в 11:58

Данная тема интересна. Ожидаем серию уроков по данному направлению. Спасибо, что не ушел в зимнюю спячку )

Ответить

Hell 25 ноября 2015 г. в 11:30

Спасибо! Очень нужная информация.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад