CSS. Функции

attr()

Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>attr()</title>
        <style>
            .site::after {
                content: ' (' attr(href) ') '; /* Выводим адрес ссылки в скобках */
                font-size: 0.8em; /* Уменьшаем текст*/
                background: yellow; /* Жёлтый фон */
            }
        </style>
    </head>
    <body>
        <p><a href="https://orkhanalyshov.com" class="site">Полезный сайт</a></p>
    </body>
</html>

В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.

blur()

Функция blur() задаёт размытие по Гауссу изображений, фоновых картинок или текста. К элементу <body> напрямую применить размытие нельзя, только к его потомкам.

В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px). Чем больше значение, тем сильнее будет размыто изображение. Отрицательное значение не допускается. Пустое значение воспринимается как 0px.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>blur()</title>
        <style>
            .bg {
                background: url("https://alishoff.com/uploads/5d84a5eee3aa3.jpg");
                background-size: cover;
                position: fixed;
                left: 0; right: 0; top: 0; bottom: 0;
                -webkit-filter: blur(5px);
                filter: blur(5px);
            }
        </style>
    </head>
    <body>
        <div class="bg"></div>
    </body>
</html>

brightness()

Функция brightness() понижает или повышает яркость изображений или фоновых картинок.

Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают яркость изображения. Таким образом, 0 даёт полностью чёрную картинку. Значения больше 100% (или больше 1) повышают яркость изображения. Отрицательное значение не допускается. Пустое значение воспринимается как 1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>brightness()</title>
        <style>
            .pic {
                -webkit-filter: brightness(150%);
                filter: brightness(150%);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" alt="Оригинал">
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="pic" alt="Повышенная яркость">
    </body>
</html>

calc()

Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время, число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется.

Выражение представляет собой комбинацию значений размеров и следующих знаков математических действий:

+ : сложение (width: calc(20px + 20px))
- : вычитание (padding: calc(10% - 10px);)
* : умножение (height: calc(20%*2);)
/ : деление. На ноль делить запрещено (width: calc(100%/3);)

* Знаки плюс и минус должны отбиваться пробелами с двух сторон.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>calc</title>
        <style>
            div {
                border: 1px solid #000;
                height: 200px;
                background: url("https://alishoff.com/uploads/5d84a5eee3aa3.jpg") no-repeat;
                background-position: calc(100% - 20px) 0;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

В данном примере задаётся положение фонового рисунка как 20 пикселей от правого края.

contrast()

Функция contrast() понижает или повышает контрастность изображений или фоновых картинок.

Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения. Отрицательное значение не допускается. Пустое значение воспринимается как 1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>contrast()</title>
        <style>
            .pic {
                -webkit-filter: contrast(1.5);
                filter: contrast(1.5);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" alt="Оригинал">
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="pic" alt="Повышенная яркость">
    </body>
</html>

drop-shadow()

Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

filter: drop-shadow(<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>);

<сдвиг по x> - Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное - влево. Обязательный параметр.
<сдвиг по y> - Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное - вверх. Обязательный параметр.
<размытие> - Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.
<цвет> - Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.

При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color.

.shadow {
    -webkit-filter: drop-shadow(0 0 3px rgba(100,0,0,0.5));
    filter: drop-shadow(0 0 3px rgba(100,0,0,0.5));
}

grayscale()

Функция grayscale() превращает изображение в чёрно-белое.

Значение 100% или 1 превращает изображение в чёрно-белое. Значение 0 оставляет изображение исходно цветным. Значения меньше 100% (или меньше 1) линейно меняют цветность картинки. Отрицательное значение не допускается. Пустое значение воспринимается как 0.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grayscale()</title>
        <style>
            .grayscale {
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
                transition: 1s;
            }
            .grayscale:hover {
                -webkit-filter: grayscale(0);
                filter: grayscale(0);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="grayscale">
    </body>
</html>

hue-rotate()

Функция hue-rotate() изменяет цветность изображения за счёт поворота оттенка на цветовом круге.

В качестве значения указывается угол (к примеру: 45deg), который задаёт поворот оттенка на цветовом круге. 0 или 360 градусов оставляет изображение неизменным. Любые значения больше или меньше нуля производят сдвиг цвета в изображении. Пустое значение воспринимается как 0deg.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hue-rotate()</title>
        <style>
            .hue {
                -webkit-filter: hue-rotate(30deg);
                filter: hue-rotate(30deg);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg">
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="hue">
    </body>
</html>

invert()

Функция invert() инвертирует цвета в изображении. По своему действию похоже на превращение фотографии в негатив.

Значение 0 оставляет изображение исходным. Значение 100% или 1 полностью инвертирует цвета картинки. Значения от 0% до 100% или от 0 до 1 инвертируют цвета частично. Отрицательное значение не допускается. Пустое значение воспринимается как 0.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>invert()</title>
        <style>
            .invert {
                -webkit-filter: invert(1);
                filter: invert(1);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" alt="Ранетка">
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" alt="Ранетка" class="invert">
    </body>
</html>

linear-gradient()

Функция linear-gradient() добавляет линейный градиент к фону элемента. Она выступает значением свойства background-image или background.

background-image: linear-gradient([<угол> | to <позиция>]?, <цвет> [, <цвет>]*);

<угол> - Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg. Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке.
<цвет> - Представляет собой значение цвета, за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция> - Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Градиент</title>
        <style>
            .gradient {
                background: #fefcea; /* Для старых браузеров */
                background: linear-gradient(to top, #fefcea, #f1da36);
                padding: 10px;
                border: 1px solid #333;
            }
        </style>
    </head>
    <body>
        <p class="gradient">
            Здесь обсценная идиома традиционно начинает прозаический
            образ, но языковая игра не приводит к активно-диалогическому пониманию.
        </p>
    </body>
</html>

opacity()

Функция opacity() задаёт степень прозрачности изображений. По своему действию похожа на свойство opacity, но некоторые браузеры для фильтров применяют аппаратное ускорение, чтобы повысить их производительность.

Значение 100% или 1 оставляет изображение исходным. Значение 0% или 0 делает изображение полностью прозрачным. Любые значения от 0% до 100% или от 0 до 1 задают степень прозрачности картинки. Отрицательное значение не допускается. Пустое значение воспринимается как 1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>opacity()</title>
        <style>
            .opacity {
                -webkit-filter: opacity(0.5);
                filter: opacity(0.5);
                transition: 1s;
            }
            .opacity:hover {
                -webkit-filter: opacity(1);
                filter: opacity(1);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="opacity">
    </body>
</html>

perspective()

Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin.

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>perspective()</title>
        <style>
            body {
                background: #000;
                color: #ffe919;
            }
            @keyframes scroll {
                from { top: 100%; }
                to { top: -100%; }
            }
            .titles {
                position: absolute;
                width: 18em;
                height: 50em;
                bottom: 0;
                left: 50%;
                margin-left: -9em;
                font-size: 2em;
                line-height: 1.5;
                text-align: justify;
                transform-origin: 50% 100%;
                transform: perspective(300px) rotateX(25deg);
                overflow: hidden;
            }
            .content {
                position: absolute;
                top: 100%;
                animation: scroll 90s linear infinite;
            }
        </style>
    </head>
    <body>
        <div class="titles">
            <div class="content">
                <p>
                    В Галактике бушует гражданская война.
                    Корабли повстанцев, нанеся удар с тайной базы, одержали первую
                    победу над жестокой Галактической Империей.
                </p>
                <p>
                    Во время сражения шпионы повстанцев смогли добыть секретные чертежи
                    супероружия Империи — ЗВЕЗДЫ СМЕРТИ, укрепленной космической станции,
                    обладающей достаточной огневой мощью, чтобы уничтожить целую планету.
                </p>
                <p>
                    Преследуемая зловещими агентами Империи, принцесса Лея летит
                    домой на своем корабле, везя с собой украденные чертежи, которые
                    могут спасти её народ и вернуть свободу галактике...
                </p>
            </div>
        </div>
    </body>
</html>

radial-gradient()

Функция radial-gradient() добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки.

Радиальный градиент создаётся с помощью свойства background или background-image.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Градиент</title>
        <style>
            div {
                background: radial-gradient(circle closest-side, #333 10px, white 11px, white 30px, green 31px);
                height: 70px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

repeating-linear-gradient()

Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gradient() и имеет те же параметры. При этом цвета последовательно сменяют друг друга, после последнего цвета в списке цветов градиента сразу же идёт первый.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Градиент</title>
        <style>
            body {
                background: repeating-linear-gradient(-45deg, #fff, #fff 25px, #e2edc1 25px, #e2edc1 50px) fixed;
            }
        </style>
    </head>
    <body>
    </body>
</html>

repeating-radial-gradient()

По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис. Но цвета градиента бесконечно повторяются во всех направлениях образуя узор, заполняющий фон элемента.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Градиент</title>
        <style>
            body {
                background-image: repeating-radial-gradient(circle at 200px 100px, #fff, #fff 25px, #fce3ee 25px, #fce3ee 50px);
                background-attachment: fixed;
            }
        </style>
    </head>
    <body>
    </body>
</html>

rotate()

Функция rotate(α) поворачивает элемент в двумерном пространстве вокруг точки вращения на заданный угол α. Точка вращения по умолчанию располагается в центре элемента и может быть изменена с помощью свойства transform-origin.

Положительное значение поворачивает элемент на заданный угол по часовой стрелке, отрицательное значение поворачивает элемент против часовой стрелки.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>rotate()</title>
        <style>
            .round {
                border-radius: 50%; /* Круглые изображения */
                transition: 0.5s; /* Время поворота */
            }
            .round:hover {
                transform: rotate(360deg); /* Поворачиваем на 360 градусов */
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="round">
    </body>
</html>

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

rotateX()

Функция rotateX(α) поворачивает элемент вокруг оси X на заданный угол α.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>rotateX()</title>
        <style>
            .round {
                border-radius: 50%; /* Круглые изображения */
                transition: 0.5s; /* Время поворота */
            }
            .round:hover {
                transform: rotateX(360deg); /* Поворачиваем на 360 градусов */
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="round">
    </body>
</html>

rotateY()

Функция rotateY() поворачивает элемент вокруг оси Y на заданный угол α.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>rotateY()</title>
        <style>
            .round {
                border-radius: 50%; /* Круглые изображения */
                transition: 0.5s; /* Время поворота */
            }
            .round:hover {
                transform: rotateY(360deg); /* Поворачиваем на 360 градусов */
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="round">
    </body>
</html>

rotateZ()

Функция rotateZ(α) поворачивает элемент вокруг оси Z на заданный угол α.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>rotateZ()</title>
        <style>
            .round {
                border-radius: 50%; /* Круглые изображения */
                transition: 0.5s; /* Время поворота */
            }
            .round:hover {
                transform: rotateZ(360deg); /* Поворачиваем на 360 градусов */
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="round">
    </body>
</html>

saturate()

Функция saturate() изменяет насыщенность цветов в изображении.

Значение 0% или 0 полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% или 1 оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными. Отрицательное значение не допускается. Пустое значение воспринимается как 1.

.saturate {
    -webkit-filter: saturate(1.5);
    filter: saturate(1.5);
}

sepia()

Функция sepia() превращает изображение в сепию - так называется чёрно-белое изображение с коричневым оттенком. Сепия придаёт фотографиям старинный вид.

Значение 0% или 0 оставляет изображение неизменным. Значение 100% или 1 полностью превращает изображение в сепию. Любые значения от 0% до 100% или от 0 до 1 линейно применяют эффект. Отрицательное значение не допускается. Пустое значение воспринимается как 0.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>sepia()</title>
        <style>
            .sepia {
                -webkit-filter: sepia(80%);
                filter: sepia(80%);
                transition: 1s;
            }
            .sepia:hover {
                -webkit-filter: sepia(0);
                filter: sepia(0);
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg" class="sepia">
    </body>
</html>

При наведении курсора мыши на фотографию, она плавно превращается в цветную.

scale()

Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>scale()</title>
        <style>
            div {
                display: inline-block; /* Выстраиваем по горизонтали */
                overflow: hidden; /* Обрезаем */
            }
            div img {
                display: block; /* Убираем отступ снизу */
                transition: 1s; /* Время перехода */
            }
            div img:hover {
                transform: scale(1.4); /* Масштабируем */
            }
        </style>
    </head>
    <body>
        <div>
            <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg">
        </div>
    </body>
</html>

В данном примере при наведении указателя на картинку она плавно увеличивает свой масштаб. Чтобы размеры блока оставались исходными используется свойство overflow со значением hidden.

scaleX()

Масштабирует элемент по горизонтальной оси X.

scaleY()

Масштабирует элемент по вертикальной оси Y.

scaleZ()

Масштабирует элемент по оси Z. Эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, а также при смещении элемента по оси Z.

img {
    transform: perspective(400px) scaleZ(-1) translateZ(-50px);
}

skew()

Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>skew()</title>
        <style>
            li {
                background: #a9c358; /* Цвет фона */
                list-style: none; /* Убираем маркеры */
                width: 300px; /* Ширина списка */
                margin-bottom: 10px; /* Отступ снизу */
                transform: skew(-30deg); /* Наклоняем вправо */
            }
            li a {
                color: #2c285d; /* Цвет ссылок */
                text-decoration: none; /* Убираем подчёркивание */
                display: block; /* Блочные ссылки */
                padding: 5px 20px; /* Поля */
                transform: skew(30deg); /* Наклоняем ссылки обратно */
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">Пирамида Хеопса</a></li>
            <li><a href="#">Висячие сады Семирамиды</a></li>
            <li><a href="#">Статуя Зевса в Олимпии</a></li>
            <li><a href="#">Храм Артемиды в Эфесе</a></li>
            <li><a href="#">Мавзолей в Галикарнасе</a></li>
            <li><a href="#">Колосс Родосский</a></li>
            <li><a href="#">Александрийский маяк</a></li>
        </ul>
    </body>
</html>

skewX()

Наклоняет элемент на заданный угол по горизонтали.

skewY()

Наклоняет элемент на заданный угол по вертикали.

translate()

Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали.

transform: translate(tx);
transform: translate(tx, ty);

tx - Сдвиг по горизонтали. Положительное значение сдвигает вправо, отрицательное влево.
ty - Сдвиг по вертикали. Положительное значение сдвигает вверх, отрицательное вниз. Если значение не указано, то по умолчанию принимается равным 0 и сдвига по вертикали не происходит.

В качестве значений принимаются любые единицы длины, принятые в CSS - например, пиксели (px), дюймы (in), пункты (pt) и др. Одно значение сдвигает элемент только по горизонтали, два значения сдвигают элемент по горизонтали и вертикали независимо. Значение 0 не меняет положение элемента.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>translate()</title>
        <style>
            img {
                transition: 0.5s;
            }
            img:hover {
                transform: translate(5px, 10px); /* Сдвигаем вправо и вниз */
            }
        </style>
    </head>
    <body>
        <img src="https://alishoff.com/uploads/5d84a5eee3aa3.jpg">
    </body>
</html>

В данном примере при наведении указателя на картинку она смещается вправо и вниз.

translateX()

Сдвигает элемент относительно его исходного расположения на заданное значение по горизонтали.

translateY()

Сдвигает элемент относительно его исходного расположения на заданное значение по вертикали.

translateZ()

Сдвигает элемент относительно его исходного расположения на заданное значение по оси Z. Эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y.

var()

Функция var() позволяет вставлять значения пользовательских переменных в значения стилевых свойств. var() нельзя использовать в именах селекторов и в свойствах.

Сами пользовательские переменные и их значения описываются внутри произвольного селектора и должны начинаться с двух дефисов. Через двоеточие переменной присваивается любое допустимое для CSS значение.

aside {
    --my-font: Helvetica, Arial, sans-serif;
}

Для обращения к переменной --my-font используется запись var(--my-font), которую можно вставлять в качестве значения свойства. При этом область видимости переменной ограничена указанным селектором (aside в данном случае) и применение var(--my-font) в другом селекторе не даст результата. Для создания глобальных переменных их следует описать внутри селектора :root.

var( <переменная> [, <значение> ]? )

<переменная> - Имя переменной, обозначается двумя дефисами впереди (--my-font).
<значение> - Резервное значение, которое подставляется вместо заданного, в том случае, если переменная не определена. Через запятую можно указать несколько значений.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>var()</title>
        <style>
            :root {
                --primary-color: #0275d8;
                --info-color: #5bc0de;
            }
            button {
                padding: .5rem 1rem;
                border: none;
            }
            .primary {
                color: var(--white, #fff);
                background-color: var(--primary-color);
            }
            .info {
                color: var(--white, #fff);
                background-color: var(--info-color);
            }
            p.info {
                --primary-color: #31708f;
                padding: 10px;
                background-color: #d9edf7;
                color: var(--primary-color);
            }
        </style>
    </head>
    <body>
        <p class="info">Кнопки</p>
        <button class="primary">Типовая кнопка</button>
        <button class="info">Информация</button>
    </body>
</html>

В данном примере вводятся две переменные: --primary-color и --info-color. Переменная --white не определена, поэтому подставляется указанное значение по умолчанию. Для селектора p.info значение переменной --primary-color переопределяется.