0Pricing
CSS Academy · Aula

Aninhamento de variáveis e parciais

Use variáveis Sass para valores reutilizáveis, aninhe seletores para melhorar a legibilidade e divida o código em parciais.

Aninhamento de variáveis e parciais é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O que é Sass?

Sass (Folhas de estilo sintaticamente incríveis) é um pré-processador de CSS que amplia o CSS com variáveis, aninhamento, misturas, funções e muito mais. Os arquivos Sass são compilados para CSS padrão.

Duas sintaxes do Sass

O Sass tem dois formatos de arquivo:

  • .scss — sintaxe de superconjunto compatível com CSS (a mais popular)
  • .sass — sintaxe baseada em indentação (sem chaves ou ponto e vírgula)

Este curso aborda SCSS.

Variáveis do Sass

As variáveis do Sass usam o prefixo $. Elas são resolvidas em tempo de compilação — ao contrário das propriedades personalizadas do CSS, não permanecem ativas no navegador.

<button class="button">Sass Variables</button>

Variáveis do Sass versus propriedades personalizadas do CSS

Principais diferenças:

  • Variáveis do Sass: tempo de compilação, não ficam no navegador e não podem mudar em tempo de execução
  • Propriedades personalizadas do CSS: permanecem ativas no navegador, podem ser alteradas por JS e respeitam a cascata

Prática moderna: use ambas. Variáveis do Sass para a lógica em tempo de compilação; propriedades personalizadas do CSS para a tematização em tempo de execução.

Aninhamento

O Sass permite aninhar seletores uns dentro dos outros, espelhando a estrutura do HTML. A saída compilada usa seletores descendentes.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Seletor pai &

O & faz referência ao seletor pai, permitindo padrões semelhantes ao BEM e seletores de estado:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Aviso sobre a profundidade do aninhamento

Evite aninhar além de 3 níveis. O aninhamento profundo produz seletores específicos demais e torna o CSS frágil. Se você perceber que está aninhando profundamente, provavelmente a arquitetura do CSS precisa ser refatorada.

Fragmentos do Sass

Um fragmento é um arquivo Sass cujo nome começa com um sublinhado (_card.scss). Os fragmentos não são compilados de forma independente — precisam ser importados para outro arquivo. Isso evita gerar arquivos de saída CSS indesejados.

@use para importações

O Sass moderno usa @use para importar fragmentos. Ele fornece separação por espaços de nomes para evitar conflitos entre variáveis:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward para bibliotecas

@forward reexporta os membros de um módulo para que possam ser usados pelos arquivos que importam sua biblioteca:

<span class="badge">Forwarded token (lib.$primary-color)</span>

@import legado (obsoleto)

A diretiva mais antiga @import está obsoleta no Dart Sass. Migre para @use e @forward para obter melhor separação por espaços de nomes e desempenho.

Verificação rápida

Qual seletor CSS o Sass gera ao aninhar .nav { .link { color: white; } }?

Recapitulação

As variáveis do Sass ($name) são resolvidas em tempo de compilação. O aninhamento espelha a estrutura do HTML, mas evite ultrapassar 3 níveis. & faz referência ao seletor pai para pseudo-classes, estados e modificadores BEM. Os fragmentos (_file.scss) são importados, não compilados diretamente. Use @use (não @import) para o carregamento moderno de módulos do Sass.

Perguntas Frequentes

A aula “Aninhamento de variáveis e parciais” é grátis?

Sim — o texto completo de “Aninhamento de variáveis e parciais” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Aninhamento de variáveis e parciais”?

Use variáveis Sass para valores reutilizáveis, aninhe seletores para melhorar a legibilidade e divida o código em parciais. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Aninhamento de variáveis e parciais”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Aninhamento de variáveis e parciais
  2. Mixins e inclusões
  3. Seletores de extensão e marcadores de posição
  4. Funções Sass e fluxo de controle
← Voltar para CSS Academy