Использование CSS-переменных

Часть раздела Practical Frontend путешествия по HTML на Coddy — урок 2 из 35.

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

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

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

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Задание

Легко

У вас есть веб-страница, на которой показано несколько фильмов, идущих в кинотеатре. У каждого фильма есть кнопка Buy Ticket.

Ваша задача:

Создайте CSS-переменную с именем --main-color внутри селектора :root и установите её значение равным seagreen.
Используйте эту переменную, чтобы установить цвет фона для всех элементов <button> на странице.

Шпаргалка

CSS-переменные (пользовательские свойства) позволяют сохранять значения под определенным именем и повторно использовать их во всем CSS-коде.

Переменные объявляются внутри селектора с использованием синтаксиса --variable-name. Используйте :root, чтобы сделать переменные глобальными:

:root {
 --main-color: midnightblue;
 --padding: 16px;
}

Чтобы использовать переменную, воспользуйтесь функцией var():

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}

Попробуйте сами

<html>
<head>
    <title>How to declare a variable</title>
    <style>
        :root {
            --bg-color: #4c87f5;
             /* Write CSS rules here */
             
          }
        body {
            font-family: Arial, sans-serif;
            background: var(--bg-color);
            padding: 20px;
          }
        .movie {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
          }
        .movie h2 {
            margin: 0 0 10px;
          }
        .movie p {
            margin: 0 0 10px;
          }
        button {
            color: black;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
             /* Write CSS rules here */
            
          }
    </style>
</head>
<body>
    <h1>Today's Movies</h1>
    <div class="movie">
      <h2>Ocean Whispers</h2>
      <p>A sailor discovers a hidden island and the secrets of the sea.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Midnight Chase</h2>
      <p>A detective races against the clock to stop a mysterious heist.</p>
      <button>Buy Ticket</button>
    </div>
    
    <div class="movie">
      <h2>Starlight Bakery</h2>
      <p>A warm comedy about friendship and following your dreams.</p>
      <button>Buy Ticket</button>
</div>
</body>
</html>