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 и вы бы хотели более подробно познакомиться с ним, то пожалуйста, поставьте лайк или оставьте комментарий к этой статье. По вашей обратной связи я уже смогу понять, стоит ли добавлять новые уроки на блог по данной теме.

Добавить комментарий

  • Все усовершенствования и оптимизации идут от лени… Именно над оптимизацией процесса отрисовки CSS-стилей и задумывался, но планировал использовать JS. А тут оказывается всё так просто. Спасибо за очередную очень полезную информацию.

  • 01.12.2015 13:54

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

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

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

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

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

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

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

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

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

  • 25.11.2015 23:09

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

  • 25.11.2015 21:13

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

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

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

  • 25.11.2015 17:46

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

  • 25.11.2015 14:26

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

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

  • 25.11.2015 13:16

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

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

  • 25.11.2015 12:15

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

  • 25.11.2015 11:58

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

  • 25.11.2015 11:30

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