CSS променливи
Променливи стават роден инструмент в CSS, сега те не са само в Препроцесорът. В тип CSS Предкомпилатори Sass променливи са много популярни.
Колкото по-добре променливата подкрепа в браузърите (без Edge и IE), толкова по-лесно е да ги използвате в кода си.
CSS как да се декларират променливи
Най-добре е да се декларира променливи в CSS псевдо-класовете: корен в стиловете заглавката. Псевдо-клас: корен се отнася до най-високата родителя в DOM, обикновено маркират HTML. Един от най-универсален избор.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
В псевдо-класа: коренови действа като селектор. Променлива започва с две тирета, последвани от името на променливата и стойност. На следващо място, кодът за създаване на променлива може да бъде посочен във всички подходящи за този случай. например:
В този пример се промени цвета на фона на всички раздели в стойността, записана в променливата -primary-цвят. Тази променлива, която е в псевдо-класове: корен, е записан на червено стойност.
Как да използвате променливите в CSS
Ако е необходимо да промените цвета от червен на син, трябва или да използват цялата променлива код с грешно име или промяна променливи във всички места.
Най-вероятно вие ще искате да се избегне и двата проблема, тъй като те убие идеята за бърз и лесен за редактиране на код.
По-правилно да създаде CSS променливи, както е показано по-долу, на два етапа:
създаване на два етапа от променливи, както е показано по-горе, позволява лесно и ефективно да редактирате кода. Ако е необходимо да се промени сянката на червено във всички стилове, ще трябва само да се промени променливата -червени. В противен случай, ще трябва да се променят всички стойности ръчно.
Също така на равнището на променливите по този начин, можете да промените цвета за преден план на обекта. Ако трябва да се постави на синия цвят, което трябва да направите само две стъпки.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Първо е необходимо да се декларира променлива със син цвят, а след това да го регистрира като основния цвят. По-долу е пример на базата на предишния.
практическо приложение
В CSS променливи, има много примери за практически (и непрактично) приложение. Аз ще ви кажа за практическите от моя гледна точка.
Насоки за цвета и стила
С помощта на променливите могат да бъдат създадени от стилове и лесно промени в ръководството. Най-добрият начин. По-долу е нагледен пример за стилово ръководство с цветя.
В дългосрочен план, този процес ви позволява бързо и лесно да редактирате кода. Можете да направите малки промени в цвета и редактирате всички CSS.
Margin'y и padding'i
С помощта на променливите може да се зададе и по подразбиране margin'y padding'i. например:
Височината и ширината на
Интересна тема, като използвате функцията за CSS изчислено () за извършване на изчисления. Преди да обяснява, ще дам един пример:
Можете да зададете размера на родителското устройство и за изчисляване на размера на децата във връзка с родителя. Методът работи добре, особено за създаването на адаптивни елементи.
Други начини за използване на променливи в стиловете
Променливи са много подходящи за стила на шрифта, сенки (бокс-сянка), анимации и т.н. Променливите могат да бъдат използвани по никакъв начин.
Забележка: В демото по-долу може да се редактира директно на страницата.
Демо CSS с променливи
Редакция: Екип webformyself.
Практически курс по адаптивно оформление Кацане от нулата!
Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни
Най-IT новини и уеб разработки на нашия канал Телеграма
HTML5 и CSS3 практика от нула до резултата!
Свързани статии