Будьте в курсе последних событий, подпишитесь на обновления сайта

Переменные в CSS

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств.  Но теперь эта возможность  появилась и в чистом CSS без всяких там препроцессоров. Вот о ней  я и хочу  рассказать в этой статье.

переменные в css

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные  свойства).

Определение переменных CSS  надо начинать  с префикса —, например, —my-var.  Их можно определять  для любого элемента. Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Переменные в CSS3</title>
        <style>
            div {
              --text-col: #ff4766;
              --text-siz: 30px;
              height: 40px;
              font-family: Verdana;
            }

            #div1 {
                font-size: var(--text-siz);
            }

            #div2 {
                color: var(--text-col);
            }

            #p1 {
                color: var(--text-col);
                font-size: var(--text-siz);
            }
        </style>
    </head>
    <body>
        <div id="div1">Первый блок.</div>
        <div id="div2">Второй блок.</div>
        <div><p id="p1">Третий блок.</p></div>
    </body>
</html>

Просмотреть  пример

Здесь в примере CSS для элемента div определены 2 переменныx: —text-col и —text-siz.

--text-col: #ff4766;
--text-siz: 30px;

С помощью специального выражения var() вы можете ссылаться на эти переменные в любой части кода:

#p1 {
    color: var(--text-col);
    font-size: var(--text-siz);
   }

В итоге 1-ый блок получит высоту шрифта из —text-siz, 2-ой блок получит цвет шрифта из —text-col, а третий блок получит оба этих компонента.

Ну а если вам потребуется изменить цвет текста, то  достаточно будет изменить значение переменной.

Подобные переменные вы можете определить для любого элемента. При этом они будут наследоваться дочерними элементами. Так, в примере, вложенный элемент параграфа получает стили от родительского div.

А, что если бы параграф находился бы вне блока div:

<div id="div1">Первый блок.</div>
<div id="div2">Второй блок.</div>
<p id="p1">Третий блок.</p>

Тогда бы значения из переменных к нему бы не применились:

Читайте также  Программа Koala — легкая компиляция Sass, Less и CoffeeScript

В случае, если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их  надо определить  для элемента :root.

:root{
    --text-color: #ff4757;
    --text-size: 20px;
}

Резервные значения переменных

При определения переменных они могут содержать какие-нибудь ошибки, например, переменная вообще не определена. В этом случае вы можете указать при применении переменной резервные значения, которые бдут применяться в случае, если значение переменной отсутствует или некорректно.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width" />
        <title>Переменные в CSS3</title>
        <style>
            :root{
              --tex-color: #ff4766;
              --text-size: 20px;
              --reserved-color: #5352aa;
            }
            div {
              height: 35px;
              font-family: Verdana;
            }

            #div1 {
                color: var(--text-color, var(--reserved-color));
            }

            #div2 {
                color: var(--text-color, var(--reserved-color, red));
            }

            #div3 {
                color: var(--text-color, #2ed573);
            }
        </style>
    </head>
    <body>
        <div id="div1">Первый блок.</div>
        <div id="div2">Второй блок.</div>
        <div id="div3">Третий блок.</div>
    </body>
</html>

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

color: var(--text-color, var(--reserved-color));

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

color: var(--text-color, var(--reserved-color, blue));

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: