Переменные CSS

Когда мы разрабатываем и оформляем страницы, мы можем заметить некоторые повторения в файле CSS, и чем больше растет проект, тем сложнее его поддерживать.

И поскольку это повторяющаяся проблема, создатели препроцессоров CSS, таких как SASS, добавили переменные, но использование SASS, например, добавляет еще один шаг обработки. Так были созданы переменные CSS, и использовать их довольно просто.

Я разработал небольшой проект, чтобы продемонстрировать, как объявлять переменные и использовать их.

Структура файла HTML

<body>

  <div class="container">
    <main class="children">
      <h2>Variáveis CSS</h2>
      <blockquote cite="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: --cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(--cor-principal); )</blockquote>
    </main>
  </div>

</body>
Войдите в полноэкранный режим Выход из полноэкранного режима

Как объявить переменные файла CSS

Переменные объявляются в псевдоклассе :root, как в примере ниже.

:root {
  --background: #700353;
  --background-alternative: #ffbfb7;
  --text-color: #320d6d;

  --h2-font-size: 3.8rem;
  --blockquote-font-size: 1.6rem;

  --border-radius: 10px;

  --padding: 4rem;
}
Войдите в полноэкранный режим Выход из полноэкранного режима

И как я могу использовать объявленные переменные?

Использовать переменные очень просто, достаточно поместить var(имя переменной) в значение свойства.

.children {
  width: 50rem;
  height: 50rem;
  background: var(--background-alternative);

  text-align: center;
  padding: var(--padding);

  color: var(--text-color);

  border-radius: var(--border-radius);
}

.children h2 {
  font-size: var(--h2-font-size);
}
Войдите в полноэкранный режим Выход из полноэкранного режима

Предварительный просмотр проекта

Ссылка с полным кодом на github находится здесь.

Мои сети:
Linkedin
Twitter

Источник:
MDN

Надеюсь, я помог сделать вашу разработку проще и быстрее.

Оцените статью
devanswers.ru
Добавить комментарий