Име на CSS променливи говори за себе си. Подобно на променливи в Препроцесорът, те съхраняват някои стойности, които трябва да се използва повторно.
CSS променливи работят на базата на общи свойства. Променливи са наследени, но не можете да пренапише стойност за променливата първоначална стойност в началото.
Променливи започват с - но причинени като стойността чрез Var структура (-myvar). Представете си, че това е най-префикс имота, но с празна префикс (както -webkit- само без думи WebKit). Представката е специално подбран, за да използвате променливи без конфликти Sass / По-малко.
CSS променливи са дефинирани, както и други свойства. Те дори могат да се регистрират в рамките на атрибута HTML стил, който ни дава възможност да Theming. CSS променливи са главни и малки букви и не могат да бъдат празни.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Ако променливата е настроен на неправилна стойност на имотите, към които е приложен, той ще бъде компилиран грешка «Невалиден при изчислена стойност на времето» и фабрично настроени по подразбиране.
Можете да определите folbek по случая, ако променливата не е зададен. Както folbeka може да е други променливи, които могат да бъдат и тяхното folbeki.
В CSS не съществува никакъв конкатенация (с изключение на съдържанието на собственост), и следователно подлежат на CSS променливи наниз. Това е, например, не може да се комбинира с различни номера и променливи с единици.
Responsive дизайн, анимация и Theming
запитвания медийни
CSS променливи могат да бъдат използвани в медийни заявки. Много полезно нещо: вие само един път създаде правила и може да пренапише стойността на променливата, в рамките на заявката за медии.
Ключови кадри анимации и плавни преходи
Тъй като е невъзможно да се определи точно какъв тип данни ще се съхраняват в променливата на CSS, а след това в момента те не се поддават на анимация. Браузърът просто няма да знаят какво да правят с анимация.
Ако се опитате да анимирате променлива вътре анимация ключови кадри на, елементът просто ще скочи от една стойност в друга.
Въпреки това, анимацията може да работи за определени свойства при промяна на стойността на имотите, към които се прилага преходен имота:
Чрез промяна обществен променлива -цвят ние може да генерира и да е бутон цвят. В този случай, бутонът ще има червен текстово поле и на заден план, когато задържите.
JS могат да бъдат използвани, за да се получи, да инсталирате и промяна на CSS променливи - много мощен инструмент.
Следващият пример (взета от слайдове) чрез JS определя променлива чрез движение на мишката. Променлива се използва в CSS, за да създадете радиален градиент, която се движи курсора на мишката.
Подкрепа в браузърите
Подкрепа от CSS променливи, може би по-добре, отколкото си мислите. Въпреки това, той все още е ниска. Според сайта caniuse CSS променливи се поддържа във всички основни браузъри, с изключение на IE11 / Edge.
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии