Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Sass: Работа с променливи 0

Сподели урока

След като инсталира Sass на компютъра си и научи как да компилираш файлове, следващата стъпка е да започнеш истинската работа със Sass. Благодарение на CSS препроцесорите вече можеш да използваш променливи и в писането на CSS. В този урок ще ти помогна да положиш основите. Ще започнеш с най-лесната част, а именно - променливи. Научи как става това!

Съдържание на урока

Какво представлява променливата?

Ако имаш опит с JavaScript и/или PHP, то неминуемо вече си се сблъсквал/-а с променливи и познаваш начина им на работа. В Sass е идентичен.

Най-общо казано променливата е “контейнер на съдържание”. В нея “запазваш” определена стойност (информация), която можеш да преизползваш многократно в своя код.

Съдържанието на променливата стои винаги едно и също, освен ако изрично не го промениш.

Защо е полезна?

Променливите в Sass ти дават гъвкавост.

Представи си следния случай:

Имаш около 300 реда CSS код и на много места (да кажем 20) използваш декларацията margin-bottom: 20px;, за да поставиш разстояние между елементите. Резултата наистина ти допада. След около седмица обаче, решаваш че 20px разстояние е твърде много и искаш да го намалиш. Най-лошият вариант е да минеш през всички margin-bottom декларации (една по една) и да обновиш стойността ръчно.

Този пример може да ти се струва незначителен, но времето много бързо се събира. Тук 2 минути, там 2 минути и в края на деня може да се окаже, че си прекарал/-а цял час във “фиксиране” на стойности. Представи си за цял месец!

Със сигурност можеш да работиш по-ефективно!

Сега отново си представи случая от по-горе, но погледнат чрез Sass:

Имаш файл с около 300 реда код. В началото на файла декларираш променлива, в която запазваш стойността 20px. По-късно, когато решиш да използваш margin-bottom в някой елемент, като стойност му задаваш името на променливата. Така, дори и да промениш мнението си след извесно време, промяната ще бъде само на едно място, а Sass автоматично ще се погрижи за останалото.

Мисля, че виждаш контраста между двата примера и няма защо да те убеждавам, че вторият е много по-ефикасен.

Какви стойности мога да запазя в променливата?

За разика от JavaScript и PHP, променливите в Sass са малко по-ограничени.

Но тъй като кода се компилира в CSS, то е най-добре в променливата да запазваш само валидни CSS стойности. Това означава цвят, размер, име на шрифт и т.н.

Синтаксис

Променливите в Sass се декларират по следния начин:

$orange: #ff5d45;

Започваш със знака $ последван от името на променливата. Веднага след това трябва да поставиш знака :, а отдясно на него задаваш стойността, която ще бъде запазена в променливата.

Това е всичко. Изглежда наистина просто и елементарно, нали?

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

Няколко валидни променливи:

$margin: 16px;
$style: 1px solid #666;
$font: Verdana, Arial, sans-serif;
$main-color: #ff5d45;

Упражнение

Стъпка 1

Създай нов файл и го запази с разширение “.scss” (напр. “variable.scss”). Постави в него следния код:

$mrgn-btm: 20px;
$style: 1px solid #666;
$font: Verdana, Arial, sans-serif;
$base-size: 16px;
$main-color: #ff5d45;

body {
	font-family: $font;
	background-color: $main-color;
	font-size: $base-size;
}
.navigation {
	border: $style;
	margin-bottom: $mrgn-btm;
}

Стъпка 2

Компилирай файла и виж резултата. Кода трябва да изглежда така:

body {
  font-family: Verdana, Arial, sans-serif;
  background-color: #ff5d45;
  font-size: 16px; 
}
.navigation {
  border: 1px solid #666666;
  margin-bottom: 20px; 
}

Няколко добри съвета

  • Дефинирай променливите началото на файла. Така няма да ти се налага да ги търсиш из документа, а ще ти бъдат подръка още при самото отваряне.
  • Ако забележиш, че определена стойност се повтаря няколко пъти, то най-добре да я сложиш в променлива. Това ще ти спести време. Ако в последствие решиш да направиш промяна, то тя ще бъде само на едно място. Останалта част от кода ще бъде обновена автоматично.
  • Използвай описателни имена, които ти дават представа за целта на променливата. Например, името $promenliva е твърде общо и трудно можеш да отгатнеш каква информация съдържа. $orange от друга страна ти дава идеята за цвят т.е. съдържанието на променливата най-вероятно е оранжев цвят.
  • Целта на променливите е да те предпазят от излишно повторение на една и съща стойност. Точно затова трябва да се постараеш да намериш баланс между създаването на променливи и писането на обикновен код. Със сигурност не е добра идея да поставиш всичко в отделни промениви. Така кода ще стане по-объркващ, отколкото да извлечеш реална полза.

Заключение

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

Допадна ли ти урока? Какво е мнението ти за Sass до момента? Използваш ли го вече в някой свой проект? Ще се радвам да споделиш мнението си.

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

Няма коментари. Коментирай пръв!