<div></div>
<div class="variant"></div>
<div class="variant-2"></div>
// Solution 2 is to use more selectors right up top here.
// Solution 3 is to use the `*` selector here.
html {
--color-1: red;
--color-2: blue;
// Solution 1) Move this to the div.
// --bg: linear-gradient(to right, var(--color-1), var(--color-2));
}
div {
// Solution 4 is this `default` tactic.
--bg-default: linear-gradient(to right, var(--color-1), var(--color-2));
background: var(--bg, var(--bg-default));
padding: 20px;
margin: 10px;
// Part of solution 1
// background: var(--bg);
}
.variant {
--color-1: green;
}
.variant-2 {
--bg: red;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.