Skip to content

Latest commit

 

History

History
198 lines (141 loc) · 5.33 KB

variables.md

File metadata and controls

198 lines (141 loc) · 5.33 KB
Raw

Variáveis do CSS

Índice

  1. O que é
  2. Como usar?
  3. Já podemos usar em produção?

O que é

Variáveis CSS são entidades definidas por nós desenvolvedores, contendo valores que irão ser utilizados em todo o nosso projeto. Utilizamos o var(<variavel>) para indicar que estamos chamando uma variável do CSS. Essas variáveis são "vivas", o que significa que ao declará-las no seu código, elas podem ser alteradas no navegador, seja por media queries ou por Javascript.

Elas foram criadas na especificação CSS Custom Properties Lvl1 pra que a gente possa padronizar as características de design do projeto, como cores, espaçamentos e afins.

Um uso comum é declarar as variáveis dentro do :root, pois na hierarquia de seletores, o escopo dele é mais abrangente do que o do <html>, sendo o equivalente a declarar variáveis CSS globalmente, mas você pode declarar variáveis dentro de qualquer seletor CSS, ou @media.

 

💡 Pra saber mais sobre :root leia a documentação sobre pseudo-classes.

 

Para declarar variáveis CSS basta inicializá-las com dois traços --.

:root {
  --text-primary: red;
}

Pra utilizar a variável, basta usar a função var().

section {
  background-color: var(--text-primary);
}

É possível também declarar valores padrão pra variáveis, assim caso a variável não exista, ele tem um default.

.element {
  width: var(--size, 300px);
  /* Na ausência de --size, o valor será 300px */
}


Como usar?

Usar variáveis CSS como parâmetros

Você pode criar classes CSS com variáveis e usá-las passando valores diferentes. Por exemplo, podemos criar uma classe pra ajustar imagens e usar a mesma classe com diferentes tamanhos.

.square-image {
  display: block;
  max-width: 100%;
  width: var(--size, 100px);
  height: var(--size, 100px);
  object-fit: cover;
}

E usamos a classe da seguinte forma:

<!-- Nessa imagem, width e height são 200px -->
<img src="img1.jpg" class="square-image" style="--size: 200px" />
<!-- Nessa imagem, width e height são 150px -->
<img src="img2.jpg" class="square-image" style="--size: 150px" />
<!-- Nessa imagem, width e height são 150px, o valor padrão -->
<img src="img2.jpg" class="square-image" />

 

💡 Se você tiver familiaridade com Javascript, pode pensar nessa forma de aplicar variáveis CSS como criar funções de Javascript. O var(--size, 100px) pode ser lido como function size(size='100px') {}  e o style="--size: 200px" no HTML pode ser lido como size("200px").

 

Fazer mudanças via media query

Uma coisa muito comum é usar media queries pra mudar o layout do site pra um formato de coluna quando a visualização for de telefone celular (mobile). Uma forma legal de controlar esse fluxo de fileira pra é usando flexbox.

.main-section {
  display: flex;
}

@media (max-width: 420px) {
  .main-section {
    flex-direction: column;
  }
}

 

💡 Leia mais sobre flexbox nessa página aqui!

 

Com variáveis CSS, podemos ser muito mais breves:

/* Declaramos flex-direction com a variável --dir e o valor padrão de row */
.main-section {
  display: flex;
  flex-direction: var(--dir, row);
}

/* Na media query, basta atualizar o valor da variável --dir dentro do escopo da classe */

@media (max-width: 420px) {
  .main-section {
    --dir: column;
  }
}

Isso acontece pois classes CSS criam um escopo de atuação para as variáveis. Note no caso do :root, na hierarquia HTML, o root tem o maior escopo (área de abrangência) de todos:

<!-- :root -->
  <html class="color">
    <body class="color">
      <main class="color">
        <h2 class="color"></h2>
        <div class="color"></div>
      </main>
    </body>
  </html>
<!-- :root  / -->

 

Então se a gente fizer a seguinte declaração no CSS:

:root {
  --color: red;
}

main {
  --color: green;
}

div {
  --color: purple;
}

.color {
  color: var(--color, black);
}

 

O resultado vai ser:

<!-- :root -->
  <html class="color"> <!-- A cor vai ser red (root) -->
    <body class="color"> <!-- A cor vai ser red (root) -->
      <main class="color"> <!-- A cor vai ser green (main) -->
        <h2 class="color"></h2> <!-- A cor vai ser green (main) -->
        <div class="color"></div> <!-- A cor vai ser purple (div) -->
      </main>
    </body>
  </html>
<!-- :root  / -->

Percebe que usamos a mesma classe, mas conseguimos ter diferentes resultados apenas redefinindo as variáveis? Dessa forma conseguimos um CSS bem mais limpo e consistente.



Já podemos utilizar em produção?

Variáveis CSS já tem > 96% de cobertura nos navegadores mais populares, além disso tem polyfills (ferramentas que substituem a funcionalidade onde ela não tem suporte) muito bem consolidados na ausência do suporte.

Print do site Caniuse no suporte das variáveis CSS nos navegadores mais populares