Werte in Abhängigkiet von anderen Werten und "CSS-Variablen"

[Siri]

Hallo,

mein Wunsch-CSS sähe wie folgt aus:

var cssVar = 20px;  
  
@media (max-width: 450px) {  
  .testclass1 {  
    height: cssVar * 2;  
  }  
  .testclass2 {  
    height: testclass1_height * 2.5;  
  }  
}  
  
@media (min-width: 451px) and (max-width: 800px) {  
  .testclass1 {  
    height: cssVar * 2.3;  
  }  
  .testclass2 {  
    height: testclass1_height * 2.8;  
  }  
}  
  
@media (min-width: 801px) {  
  .testclass1 {  
    height: cssVar * 3;  
  }  
  .testclass2 {  
    height: testclass1_height * 3.5;  
  }  
}

Gibts dazu einen Ansatz? Eigenschaften in Abhängigkeit von anderen Eigenschaften zu definieren bzw. zu berechnen?

Viele Grüße
Siri