Variáveis Locais

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 4 de 35.

Você deve ter notado que frequentemente usamos :root para declarar variáveis. Isso ocorre porque o :root é global — as variáveis definidas aqui se aplicam a toda a página HTML (como mencionamos anteriormente).

Mas às vezes, você quer variáveis que afetem apenas certas partes da página. Por exemplo, imagine construir uma loja online com muitos cartões de produtos. Você pode criar variáveis dentro de uma classe .card para estilizar apenas esses cartões sem afetar outros elementos.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Dessa forma, a variável funciona apenas dentro de elementos .card, proporcionando mais controle sobre áreas específicas.

Desafio

Fácil

Você recebeu uma página de loja online com vários cartões de produtos. Sua tarefa:

Dentro da classe .card, crie uma variável CSS local chamada --card-accent e defina seu valor como coral.
Use esta variável para definir a cor do texto do cabeçalho <h3> dentro do cartão.
Use a mesma variável como a cor de fundo para o <button> do cartão.

Folha de consulta

Variáveis CSS podem ser definidas localmente dentro de seletores específicos, não apenas globalmente em :root. Variáveis locais aplicam-se apenas a elementos dentro do escopo desse seletor.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

Isso cria uma variável --card-color que funciona apenas dentro de elementos .card, proporcionando um controle mais direcionado sobre a estilização de componentes específicos.

Experimente você mesmo

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>