Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17738
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como usar variáveis no CSS

14-11-2016 21:09

O uso de variáveis no CSS ajuda muito. Pois podemos definir algumas variáveis no início do CSS que serão usadas em toda a folha de estilo.

Isso facilita bastante o trabalho de alteração da folha de estilo.

Para criar uma variável básica deve seguir a estrutura abaixo:

elemento{ --nome-da-variavel:valor; }

Para aplicar o valor da variável usa-se:

elemento{ propriedade:var(--nome-da-variavel) }

Você pode declarar a variável em ordem de cascata, para uso na própria classe. Por exemplo:

<style> .folha1{ --cor-do-texto: blue; } .folha2{ --cor-do-texto: green; } .folha1{ color: var(--cor-do-texto); } .folha2{ color: var(--cor-do-texto); } </style> <div class="folha1">texto</div> <div class="folha2">texto</div>

Observem que cada variável está definida em sua própria classe.

Também é possível usar o pseudo classe :root onde as variáveis criadas nessa classe podem ser usadas em toda folha de estilo.
Veja no exemplo abaixo:

<style> :root{ --cor-azul: blue; --cor-verde: green; } .folha1{ color: var(--cor-azul); } .folha2{ color: var(--cor-verde); } </style> <div class="folha1">texto</div> <div class="folha2">texto</div>

Fonte: https://developer.mozilla.org/en-US/doc ... _variables
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Google [Bot]