CSS-переменные

Закрепим задание с фоном. Сделаем такой блок:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt molestiae cum id corrupti voluptatem
Download

Такие блоки часто встречаются в лендингах. Это может быть и шапка, но чаще это что-то вроде «разбивки» между блоками.

Рассмотрим его исходный код. Изображение можешь скачать по ссылке.

<div class="layout-center-wrap-tablet bg-no-repeat bg-size-cover" style="background-image: url(blue.svg)">
    <div class="layout-wrap t-center t-white pad100-tb">
        <div class="t-bold h1 lh120">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt molestiae cum id corrupti voluptatem</div>

        <div class="mar30-t"><a class="button button-var" href="#" style="--bg: transparent; --hover-bg: #ffffff; --hover-color: #111111; --radius: 7px; --focus-shadow: #ffffff; border: 2px solid white;">Download</a></div>
    </div>
</div>

Основа

Для контейнера используем фоновое изображение и прописываем ему размер cover, чтобы оно заняло всю площадь.

Чтобы ограничить ширину wrap-блока используем класс layout-center-wrap-tablet. Он работает точно также как и layout-center-wrap, но для wrap-блока устанавливает максимальную ширину равную tablet. Этот класс позволяет избежать создание дополнительного div-блока, как это мы делали с помощью w700px-max b-center.

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

Котики
Автор котиков: Mark Turnauckas

Содержимое

Заголовок делаем, как и раньше. Используем размер равный тэгу H1, делаем его полужирным и задаём интерлиньяж 120%.

Блок ссылки-кнопки имеет верхний отступ, а ссылку оформляем с помощью класса кнопки button и нового класса button-var. Он специально спроектирован так, чтобы настраиваться через css-переменные.

CSS-переменные

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

<style>
.mycolor {color: var(--color, black)}
</style>

<div class="mycolor">Текст default</div>
<div class="mycolor" style="--color: red">Текст red</div>
<div class="mycolor" style="--color: green">Текст green</div>
Текст default
Текст red
Текст green

Переменная задаётся с помощью var(переменная, значение по умолчанию). В данном примере в классе будет использоваться переменная --color. Когда класс будет без указания переменной, она будет равна значению по умолчанию ( black).

Использовать эту возможность можно совместно со style, где указывается чему равна переменная в этом блоке.

Все css-переменные должны начинаться с --.

Область видимости CSS-переменных

Переменная имеет область видимости — те блоки внутри которых она может использоваться. В нашем примере --color объявлена в классе mycolor, но может быть задана в родительском блоке.

Текст
Текст
<div style="--color: blue">
    <div class="mycolor">Текст</div>
    <div class="mycolor">Текст</div>
</div>

То есть использование переменной происходит непосредственно в блоке, где указывается класс mycolor, но --color можно задать где-то выше у родителя.

По этой схеме можно создать css-классы, которые будут иметь глобальную область видимости, то есть доступными во всех классах. Наверное ты догадался, что для этого может использоваться тэг BODY, но это не совсем так. В реальности самый высокий уровень это тэг HTML, но его лучше вообще не трогать (по разным причинам). Когда-то дискуссии по этому поводу были достаточно горячими и был придуман компромисс: специальный псевдокласс :root, который указывает на самый верхний уровень иерархии html-документа.

Поиграем с :root

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

<style>
:root {
    --color1: red; 
    --color2: green; 
    --color3: blue; 
}

.mycolor1 {color: var(--color1)}
.mycolor2 {color: var(--color2)}
.mycolor3 {color: var(--color3)}
</style>

<div class="mycolor1">текст1</div>
<div class="mycolor2">текст2</div>
<div class="mycolor3">текст3</div>

Если тебе этот пример покажется сложным и ты плохо понимаешь, что такое «переменные», то можешь пропустить этот раздел. Главное, что тебе нужно понять — это то, что с помощью css-переменных можно настраивать свойства класса.

Вернёмся к button-var

Как ты уже понял, класс button-var работает совместно с css-переменными. Суффикс -var как раз на это указывает. Данный класс принимает несколько переменных.

  • --bg — фон кнопки
  • --hover-bg — фон кнопки при наведении
  • --hover-color — цвет кнопки при наведении
  • --radius — радиус скругления углов
  • --focus-shadow — цвет тени при фокусе кнопки
  • --color — цвет текста
  • --text-align — выравнивание текста
<a class="button button-var" href="#" style="--bg: transparent; --hover-bg: #ffffff; --hover-color: #111111; --radius: 7px; --focus-shadow: #ffffff; border: 2px solid white;">Download</a>

То есть с помощью css-переменных в Berry CSS можно настраивать разные классы. Посмотри ещё примеры кнопок, сделанных с помощью button-var.

Зачем это вообще нужно? Ответ прост: невозможно предусмотреть все варианты оформления, которые могут понадобиться при вёрстке. А если попытаться это сделать в виде классов, то их количество будет очень большим, а итоговый css-код превысит разумные пределы. Именно поэтому часть свойств использует переменные, которые можно переопределить глобально через :root, либо локально — через style используемого блока.

В Berry CSS классы, которые могут настраиваться подобным образом, как правило, имеют суффикс -var, чтобы выделяться. Вот некоторые:

  • bg-position-var — для задания позиции фона: --position
  • bor-var — бордюр: --style, --width, --color
  • rounded — скругление: --rounded-radius
  • layout-center и layout-center-wrap — ширина wrap-блока: --layout-max-width
  • и т.д.

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

Задания

1. Попробуй поиграть с оформлением кнопки с помощью переменных класса button-var, чтобы получить другой дизайн кнопки.

2. Переверстай блок с другой фоновой картинкой: purple.svg, red.svg, yellow.svg. Размести текст не по центру, а слева. Не забудь про оступы, чтобы текст не «прилипал» к краям. Подбери дизайн кнопки под цвет фона.

← Практика. Фон
Формы. Часть 1 →