Изучаем основы SASS менее чем за 20 минут

Введение в SASS

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

Вы также можете:

• Компилировать файлы вручную через терминал
• Использовать Grunt
• Используйте стороннее приложение для ПК, такое как CodeKit (платное) или Koala (бесплатно)

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

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

Переменные в SASS

Использование переменных по мнению автора статьи является самой грандиозной особенностью SASS. Если вы ранее использовали другой язык программирования, вы будете приветствовать переменные с распростертыми объятиями. Переменные в SASS хранят значения которые вы часто используете в своем коде. Например, вы хотели установить черный цвет для своего веб-сайта, но не использовать каждый раз обычный метод написания #000, вы сначала должны объявить переменную, такую как:

	$main-color: #000;
	

С этого момента, если вы хотите черный фон, заголовок или цвет шрифта, вы можете использовать:

	.main-div{
	 background-color:$main-color;
	}
	h1{
	 color:$main-color;
	}
	p{
	 color:$main-color;
	}

	

Сейчас вы наверное думаете: в чем смысл этого? Смысл заключается в том, что это позволяет нам использовать одни и те же значения быстрее, вам не нужно запоминать «сумасшедшие» шестнадцатеричные коды или наименования шрифтов, вы просто запоминаете имя переменной. Что вы предпочтете: писать $secondary-color или #98B52E, если это встречается на сайте 100 раз.

Переменные в SASS экономят ваше время не только при создании кода, а также и тогда, когда вы хотите поменять какое-либо значение. Представьте, что ваш клиент решил, что хочет изменить основной цвет на более темный, и вместо того, чтобы менять цвет #98B52E 100 раз, вы можете просто измените значение $second-color один раз, и 100 значений будут мгновенно изменены.

Типы данных в переменных SASS

Вы можете использовать переменные SASS для хранения самых разнообразных данных. Например:

	$main-font-text: ‘Open Sans’, sans-serif;
	$primary-color: #000;
	$header-font-size: 20px;
	

Миксины (mixins) в SASS

Миксины (mixins) – это блоки кода, которые вы создаете один раз, а затем можете использовать много раз в своем проекте. Если вы знакомы с языком JavaScript, то можете воспринимать миксины (mixins) как функции. Также как функции, миксины (mixins) могут принимать множественные аргументы и возвращать некоторые значения, которые в данном случае будут представлять из себя CSS код.

Одной из основных целей SASS является хорошая организация хранения CSS и миксины (mixins) замечательно подходят для этого. Они позволяют вам писать чистый код, придерживаясь DRY принципа. Если вы не знакомы с DRY, значит вам не приходилось сталкиваться с учебниками по Ruby on Rails. DRY – это принцип, который означает «не повторяй сам себя» (Do Not Repeat Yourself).

В своей компании автор и другие сотрудники используют миксины (mixins) постоянно, одна из их самых любимых миксин (mixins) представлена ниже. Сначала мы определяем миксин (mixin) используя ключевое слово @mixin, затем вы даете ей имя и указываете аргументы, которые вы хотите использовать.

	@mixin transition($args){
	 -webkit-transition: $args;
	 -moz-transition: $args;
	 -ms-transition: $args;
	 transition: $args;
	}
	

Использовать этот миксин(mixin) можно следующим образом:

	.someDiv{
	  color: $primary-color;
	  font-size:$primary-font-size;
	  background: $main-bg;
	  @include transition(all 0.3s ease-in-out)
	&:hover{
	  color: $secondary-color;
	  font-size: $secondary-font-size;
	  background: $secondary-bg;
	 }
	}
	

Этот код может показаться запутанным, но позвольте мне его разобрать по частям. Сначала мы создаем div, с классом ‘someDiv’ и задаём ему цвет, размер шрифта и фон. Затем мы вызываем созданный миксин (mixin) и передаем ему три аргумента:

• All – означает, что мы хотим использовать transition all для всех свойств этого div’а.
• 0.3s – определяет за какое время будет происходить transition.
• ease-in-out – определяет какая анимация будет использоваться в процессе transition.

Код SASS внутри &:hover будет работать когда над элементом будет находится курсор мыши. В данном случае, когда над div, с классом ‘someDiv’ будет наведен курсор мыши цвет, размер шрифта и фон будет изменяться. Созданный выше миксин (mixin) полезен в любой момент, когда вы хотите создать правила без необходимости каждый раз записывать префиксы браузера.

Директива SASS @extend

Директива @extend позволяет элементу наследовать правила другого и добавлять свои, поэтому вместо создания большого количества необходимых элементов вы можете создать один и расширить его. Например, представьте, что вам нужно создать на сайте 4 разные кнопки. CSS может выглядеть следующим образом:

	.button1{
	 text-align:center;
	 display:inline-block;
	 padding:10px 15px;
	 color:#fff;
	 background:#000;
	 font-size:15px;
	}
	.button2{
	 text-align:center;
	 display:inline-block;
	 padding:10px 15px;
	 color:#000;
	 background:#fff;
	font-size:15px;
	}
	.button3{
	 text-align:center;
	 display:inline-block;
	 padding:10px 15px;
	 color:red;
	 background:white;
	 font-size:15px;
	}
	.button4{
	 text-align:center;
	 display:inline-block; 
	padding:10px 15px;
	 color:green;
	 background:black;
	 font-size:15px;
	}
	

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

	.button{
	 text-align:center;
	 display:inline-block;
	 padding:10px 15px;
	 font-size:$button-text;
	}

	.button2{
	 @extend .button;
	 background-color:black;
	 color:white;
	}

	.button3{
	 @extend .button;
	 background-color:red;
	 color:black;
	}

	.button4{
	 @extend .button;
	 background-color:orange;
	 color:green;
	}

	

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

Вы можете подумать: ну и что, всего 4 раза, но в реальной работе вам предстоит столкнуться с CSS-файлом длинной в 3000 строк и его придётся просматривать целиком, чтобы изменить всего несколько значений, что занимает много времени.

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

По мнению автора статьи, лучшая особенность SASS - возможность использовать вложенные правила. Это экономит время, а возможность вложения кода сделает ваш код соответствующим принципам DRY и чистым. Рассмотрим следующий пример CSS-кода:

	.mainDiv{
	 background:black;
	}
	.mainDiv ul{
	 list-style:none;
	}
	.mainDiv ul li{
	 display:inline;
	}
	.mainDiv ul li a{
	 color:blue;
	}

	

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

	.mainDiv{
	 background:black;
		 ul{
			list-style:none;
		   li{
			   display:inline;
			   a{
				 color:blue;
			   }
			}
		}
	}
	

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

Функции в SASS

Ранее мы говорили о миксинах (mixins) как о функциях, но в SASS есть некоторые встроенные функции, которые вы можете использовать прямо «из коробки». Те, которые я использую довольно часто: darken, lighten и transparentize.

Вы можете использовать их следующим образом:

	.someDiv{
	 background: darken($main-color, 10%);
	 color: lighten($main-color, 5%);
	}
	

С полным списком функций вы можете ознакомиться здесь: http://sass-lang.com/documentation/Sass/Script/Functions.html

SASS. Выводы

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

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

• SASS and compass for designers
• SASS and compass in action
• SASS Essentials

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

Если вам нужна помощь с вашим цифровым маркетингом, поговорите с нашими экспертами SEO.

Оригинал статьи: Learn the basics of SASS in 20 minutes or less

Перевод: Земсков Матвей