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 до момента? Използваш ли го вече в някой свой проект? Ще се радвам да споделиш мнението си.
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

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