2

Olá, pessoal.

Como eu faço para herdar um valor de um determinado atributo em CSS?

Exemplo:

<div class="flex" id="1" style="line-height: 100px; height: 100px; background-color: red;">1</div>
<div class="flex" id="1" style="line-height: 200px; height: 200px; background-color: blue;">2</div>
<div class="flex" id="3" style="line-height: 300px; height: 300px; background-color: green;">3</div>

Nesse caso, eu queria que o documento apenas se igualasse cada line-heigh com o height. Como faço isso?

7
  • Se for igualar o line-height com o height do próprio elemento, pode(deve) fazer com javascript/jQuery. Até onde sei, com CSS puro não dá pra fazer.
    – LipESprY
    17/09/2018 às 13:11
  • Muito obrigado pelo seu comentário, @LipESprY porém eu tenho um preferêcia por uma solução em CSS ou HTML. 17/09/2018 às 13:28
  • @LipESprY com CSS é possível chegar em algo bem próximo, pois vc declara um valor só que vai ser usado tanto no height quanto no line-height então vc declara apenas 1 valor, mas que fica valendo para os 2 atributos. Veja na resposta.
    – hugocsl
    17/09/2018 às 13:46
  • @higocls Sua ideia, por mais que seja interessante, continua não sendo tão dinâmico quanto o victor sousa pretende. Imagino que utilizar uma classe base e uma classe definidora como respondido pelo lazyFox é uma solução até bem próxima a sua. O trabalho do programador será o mesmo: definir o height e definir uma classe/variável para setar o line-height. Com jQuery por exemplo, basta varrer todos elementos com a classe flex e setar o line-height conforme o height do próprio elemento... Ficaria BEEEEM mais dinâmico...
    – LipESprY
    17/09/2018 às 13:54
  • @LipESprY pode ser mais dinâmico, mas não "MUITO" mais, até pq de qualquer forma ele sempre vai ter que declarar uma altura correto? Então sempre que ele declarar a altura o valor da variável ser igual para os dois, altura e line-height. Resumindo ele só precisa declarar 1 valor... Pelo que entendi com jQuery vc vai ter que varrer o documento, pegar o valor da altura e colocar no line-height. sinceramente não vi muita vantagem, ainda mais pensando que vc vai precisar indexar o jQuery só para isso... (caso ele não exista no projeto é claro)
    – hugocsl
    17/09/2018 às 14:07

1 Resposta 1

2

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

3
  • Muito interessante, desconhecia estas CSS variables. As variáveis estão acessiveis a todos os atributos do CSS? Ou existe alguma limitação?
    – lazyFox
    17/09/2018 às 13:50
  • 1
    @lazyFox da uma olhada nessa resposta que tem uma explicação mais detalhada das variáveis. pt.stackoverflow.com/questions/298995/… Mas vc também já encontra bastante material sobre isso na internet, a maioria em inglês infelizmente...
    – hugocsl
    17/09/2018 às 13:54
  • Acho que sue resposta é o mais simples que se pode alcançar apenas com o CSS. Obrigado pela reposta e obrigado a todos os outros que contribuíram. 17/09/2018 às 14:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .