CSS-variabelen niet voor mediaqueries

CSS-variabelen zijn handig om een waarde 1 keer vast te leggen en er verder naar te verwijzen via de naam. Helaas kun je deze variabelen niet gebruiken in media queries.

Dit is wat ik wilde doen:

:root {
    --width-s:  40ch;
    --width-m:  70ch;
    --width-l: 100ch;
}

Deze variabelen waren bedoeld als grenzen voor diverse media queries, zoals deze:

@media (min-width: var(--width-s)) {
    body > header {
        height: 18vw;
    }
}

@media (min-width: var(--width-m)) {
    body > header {
        height: 15vw;
    }
}

@media (min-width: var(--width-l)) {
    body > header {
        height: 12vw;
    }
}

Na wat zoeken kwam ik erachter dat de specificatie dit niet toestaat:

The var() function can not be used as property names, selectors, or anything else besides property values.

CSS-preprocessors bieden dit soort mogelijkheden vast wel. Maar ik wil deze site eenvoudig houden, zonder extra buildstappen.