CSS Переменные: Почему это так важно?

CSS Переменные: Почему это так важно?

Разрабатывая веб-приложение, выделять набор фирменных цветов, которые будут повторно использоваться во всем внешнем виде - стандартная практика. К сожалению, каждый раз повторять эти значения, в вашем CSS - это трата времени и вероятность совершить ошибку. А если в какой-то момент, один из цветов должен быть изменен – это просто кошмар. Конечно, можно применить инструмент «найти и заменить все», но на большом проекте, это может быть опасно.

В последнее время, многие разработчики обратились к CSS препроцессорам, таким как SASS, решающими эту проблему, за счет использования препроцессорных переменных. Эти инструменты сильно повысили производительность разработчиков, но переменные, которые они используют, страдают от главного недостатка – они статичны. Добавление возможности изменять переменные во время выполнения, не только открывает дверь к таким вещам, как динамическая шаблонизация приложений, но также имеют серьезный потенциал для адаптивного дизайна. С выпуском Chrome 49, эти способности теперь доступны, в виде пользовательских свойств CSS.

Пользовательские свойства CSS, добавляют две новые функции.

  1. Это способность присвоить произвольные значения CSS свойству, подписав своим именем.


:root {
--main-color: #06c;
}
#foo h1 {

color: var(--main-color);

  1. Это синтаксис для пользовательского свойства.

--header-color: #06c;

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0