Я пытаюсь имитировать что-то похожее на следующее из styled-компонентов.Следующее позволяет мне вызывать var(--spacing)
с различными свойствами, и мне не нужно беспокоиться об обработке запросов при изменении размера страницы, поскольку переменная уже обрабатывает запрос независимо.
:root {
--spacing: 32px;
}
@media (min-width: 1024px) {
:root {
--spacing: 64px;
}
}
@media (min-width: 1440px) {
:root {
--spacing: 80px;
}
}
.example {
width: 100px;
height: 100px;
margin: var(--spacing);
}
Это прекрасно работаетв CSS / SASS, но мне интересно, смогу ли я сделать что-то подобное для стилевых компонентов?