Segue uma opção usando CSS variables.
A ideia aqui parte de um valor base setado na variável --altura
, depois vamos fazer o overhide (sobrescrever) o valor dessa variável onde quisermos. Repare que vc só precisa trocar o valor da variável e será substituído tanto o height
quanto o line-height
do elemento. Resumindo vc declara apenas 1 valor de variável que substitui o valor dos 2 atributos que vc quer mudar deixei comentado no código para facilitar
:root {
--altura: 100px; /* valor "base" */
}
.altura, .altura2, .altura3 {
height: var(--altura); /* valor "da variável" */
line-height: var(--altura); /* valor "da variável" */
}
.altura2 {
--altura: 200px; /* overhide do valor da variável */
}
.altura3 {
--altura: 300px; /* overhide do valor da variável */
}
<div class="altura" id="1" style="background-color: red;">1</div>
<div class="altura2" id="1" style="background-color: blue;">2</div>
<div class="altura3" id="3" style="background-color: green;">3</div>
Consulte o suporte dos browser, repare que apenas não funciona no IE https://caniuse.com/#feat=css-variables