Использование CSS переменных в разработке сайтов

Автор: Dudley Storey    Источник: thenewcode.com
01.02.2017
493
0
img

Читая на днях невероятно полезный сайт caniuse.com, я был приятно удивлен, что CSS переменные уже поддерживаются всеми основными браузерами, кроме одного. А это значит, что мне стоит рассмотреть их использование в современной разработке, поскольку в недалеком будущем это станет обычной практикой.

Не впервой

Стоит упомянуть, что переменные уже не в первый раз появляются в CSS: первая переменная currentColor существует уже много лет. Препроцессоры, такие как Sass, тоже уже долгое время поддерживают переменные. Новая CSS спецификация была вдохновлена многими открытиями, сделанными на протяжении долгого времени разработки.

Так же стоит упомянуть, что переменные Sass и CSS – это разные звери: они по-разному пишутся и, не смотря на то, что у них есть некоторые сходства, CSS переменные могут то, чего не могут переменные Sass, и наоборот.

Самый простой способ использовать переменные – задавать цвета, которые постоянно используются в таблице стилей, и именно с этого примера я и начну.

Цвета

Переменные могут быть заданы где угодно, но они наследуются согласно стандартным правилам CSS. По этому, есть несколько логических мест:

  • Универстальный селектор (*)
  • body
  • :root
  • Классы
  • Селекторы

На практике, переменные могут быть заданы на любом селекторе, но он ограничит их наследование, это важно.

Перед переменной ставятся два тире, сама переменная может быть любым словом без пробелов:

body { 
  --alert: #cb333b;
}
В отличие от других CSS свойств, переменные чувствительны к регистру: --alert и --Alert – это разные переменные.

Позже переменная используется в таблице стилей с функцией var(), чтобы воссоздать заданное значение:

h3 { color: var(--alert); }

Элементу h3 будет задан цвет, соответствующий переменной --alert.

Единицы изменения

Переменные могут использоваться в значениях свойств, состоящих из нескольких компонентов:

::root {
    --shadowcolor: rgba(0,0,0,0.3);
}
aside { 
    box-shadow: 50px 50px 5px var(--shadowcolor);
}

Но они не могут быть связаны с единицами измерения. Другими словами, вот так делать нельзя:

.warning {
    --timing: 1;
}
.warning:hover {
    background: red;
    transition: var(--timing)s;
}

А вот так можно:

.warning {
    --timing: 1s;
}
.warning:hover {
    background: red;
    transition: var(--timing);
}

Переменные можно использовать с функцией calc:

div { 
    min-height: 100px;
    --boldborder: 5px;
}
.subtle {
    border: var(--boldborder) solid #666;
    border-radius: calc(var(--boldborder) - 1px);
}

У элемента с классом .subtle border-radius будет 4px.

Места использования

Переменные можно задавать и использовать не только в таблице стилей. Встроенные или inline переменные тоже валидны. Например, в подключенном CSS:

::root {
    --fillet: 20px;
}

Или в HTML, inline ссылка на переменную:

<div style="border-radius: var(--fillet)"></div>  

Ключевые значения

В Sass переменные часто используются для задания ключевых значений, на которые потом ссылаются по всему CSS. То же самое можно делать, используя родные переменные CSS.

::root {
    --gutter: 1rem;
    --keytext: rgba(0, 0, 0, 0.9);
    --bordercolor: #333;
}

Эти переменные могут быть использованы где угодно в CSS:

article {
    margin: var(--gutter);
    border: 1px solid var(--bordercolor);
}
article p {
    color: var(--keytext);
}

Если все переменные собраны в одном месте, то изменив их, можно легко поменять стиль всего сайта; если изменится значение переменной, то изменится и CSS во всех местах, где она использовалась. Больше не нужно искать значения по всей таблице стилей!

К тому же, CSS переменные можно использовать внутри @media queries, это значительное преимущество по сравнению с Sass переменными.

Переменные сегодня

На данный момент, Microsoft Edge / IE – единственный браузер, который не поддерживает CSS переменные, но в Edge стоит пометка «в разработке». Это значит, что скоро разработчики смогут использовать переменные в своем коде. А пока что есть два варианта:

1. Использовать пост-препроцессоры с поддержкой CSS переменных.

Напишите CSS, перекомпилируйте его с помощью PostCSS и добавьте cssnext, на выходе вы получите нужный CSS код.

:root {
    --keycolor: limegreen;
}
h1 {
    color: var(--keycolor);
}

Результат на CSS:

h1 {
    color: limegreen;
}

В этом случаи нужно, чтобы все изменения в коде обрабатывались через cssnext. Альтернатива:

2. Используйте @supports

Можно использовать @supports, чтоб определить, поддерживает ли браузер CSS переменные:

@supports (--test: value) {
    main {
        --bcolor: rgba(0, 0, 0, 0.3);
        background: --bgcolor;
    }
}

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

main {
    background: rgba(0, 0, 0, 0.3);
}

ПОХОЖИЕ СТАТЬИ: