Когда мы разрабатываем и оформляем страницы, мы можем заметить некоторые повторения в файле 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
Надеюсь, я помог сделать вашу разработку проще и быстрее.