Переменные CSS

Назовите одну функцию, которую вы хотели бы видеть в CSS. Поднимите руки те, кто хочет переменные …  (я уверен, что некоторые из вас нуждаются в коренных селекторах, и вы не в меньшинстве!)

Вопрос связан с нашей потребностью неоднократно повторно использовать тот же цвет или значение стилей. Например, ниже в коде CSS указан один и тот же цвет #334 для разных свойств:



section {
border-color: #334;
}
     h1 {
color: #334;
}
     p {
background-color: #334;
}


Обслуживание кода CSS сложнее, чем это должно быть. Нам, как веб-разработчикам нужно помнить целый ряд значений и цвета hex/RGB или постоянно для цвета элемента применять значение #334. А если вам нужен цвет #074195 или в некоторых местах значение RGB (21,21,2 ). Страница с « Название цветов CSS3 » поможет нам, при написании таблицы CSS, а если нет доступа к интернету? Все цвета трудно запомнить, переменные CSS могут решить эту проблему. Мы определим цвет #334 в качестве одной переменной и можем использовать этот цвет по всему коду CSS. Это первый признак в CSS  реализации предварительного компилирования.

Например, в LESS уже существуют переменные:



@mycolor: #334;
    section {
border-color: @mycolor;
}
    h1 {
color: @mycolor;
}
    p {
background-color: @mycolor;
}


или переменные в  SASS :



$mycolor: #334;
    section {
border-color: $mycolor;
}
    h1 {
color: $mycolor;
}
    p {
background-color: $mycolor;
}


К счастью, скоро переменные будут поддерживаться браузерами. В проекте спецификации W3C на странице http://www.w3.org/TR/css-variables  показано, как мы можем писать код CSS3 с переменными когда производители браузеров начнут реализовывать поддержку переменных CSS3. Согласно документу W3C, любое свойство переменной будет начинаться с префикса ‘var-’.

Например:



:root {
      var-mycolor: #334;
}
    section {
border-color: var(mycolor);
}
    h1 {
color: var(mycolor);
}
    p {
background-color: var(mycolor);
}


Может быть, это не такой короткий код, как у LESS или SASS, но это большой шаг вперед, который позволит облегчить обслуживание CSS.

Заключение

Нет гарантии, что переменные CSS3 будут приняты всеми производителями браузеров, и даже если они это сделают, функция не будет совместимой со старыми браузерами. Но, для старых браузеров как всегда найдётся решение с помощью JavaScript.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>