Скъпи приятели, в общуването Вячеслав Шевченко, както и днес, аз не разполагат с голям, но интересен пост. Били ли сте някога се изправя пред проблема за разпространение на проекта, както и организирането на CSS код? Мисля, че отговорът е категорично ДА, ако не, тогава имате всичко напред.
Когато проектът започва да расте, то обикновено е CSS става тежка и трудна за поддържане. За да се реши този проблем, CSS разработчиците са въвели променливи, те са подкрепени от популярните браузъри. Това го прави лесно да се работи с повторения стилове.
Знаещи и опитни уеб дизайнери могат да се противопоставят и да кажат "променливи отдавна са в SASS и по-малко !!». Да, аз не споря, но това е предпроцесорни, и те трябва да бъдат съставени преди употреба, както и местните CSS променливи работят директно в браузъра! Това не е ли страхотно?
Променливите във файла с помощта на същия обхват, както и останалите правила в CSS. Разбира се, че е най-добре, когато те са в световен мащаб. За да направите това, вие трябва да ги декларират в псевдо-клас: корен.
Малко помощ
Сега променливи работят в Firefox и Chrome най-новата версия. Актуална информация за поддръжка може да бъде намерена тук.
По-долу ще дам няколко примера, които показват добро използване на типичните случаи на CSS-променливи. Ако не работите примери, уверете се, че имате най-новите версии на браузъра.
цветни теми
Променливи са много полезни, когато трябва да се ползва от имуществото повече от веднъж. Тук е един добър пример за цветови схеми. Вместо да копирате цвета на върховенството на правилото, ние можем просто да го постави в една променлива, и да я вземете от там.
И когато по някакви причини, ще трябва да промените цветовата тема, или да създадете нов кожа, можете да промените цветовете в само едно място, но това ще се отрази на всички страници на сайта.
Приятелски имена за имоти
Друг удобен начин да се използват променливи е да се създаде някои настройки, когато ние не искаме да се помни дълго стойността на имота, например, да се трансформират. кутия-сянка, и шрифт.
Чрез поставянето на стойността на една променлива, можем да го наречем с помощта на приятелски имена.
Динамична промяна на променливите
Примерът по-долу показва как да се манипулира лесно динамично свойства. като оставя чиста код.
Още няколко съвета
Както можете да видите, променливите в CSS - сравнително прост инструмент за използване и не изисква много време, за неговото развитие. И няколко неща, които трябва да знаете:
Var () функция приема два аргумента, вторият ще бъде използван, ако променлива, която не е толкова:
Свързани статии