Conversor de Aninhamento CSS

O que é aninhamento CSS

CSS Nesting permite que você escreva regras filhas e pseudo-classes diretamente dentro do bloco do seletor pai, da mesma forma que Sass/SCSS sempre permitiu, mas como sintaxe de navegador nativa — nenhuma etapa de compilação necessária:

.card {
  color: #1a1a1a;

  & .title {
    font-size: 20px;
  }

  &:hover {
    background: #f5f5ff;
  }
}

O CSS Nesting nativo foi lançado em todos os navegadores principais em 2023 (Chrome 112, Firefox 117, Safari 17.2), e o seletor de aninhamento & é a peça-chave — ele representa o seletor pai completo onde quer que apareça, então &:hover se torna .card:hover e & .title se torna .card .title. Comparado com Sass/Less, o aninhamento nativo é um subconjunto: ele suporta & e blocos aninhados simples (incluindo @media/@supports aninhados), mas não recursos exclusivos de Sass como mixins, funções ou @extend.

Por que achatar novamente

A maioria das ferramentas, navegadores antigos, alguns linters CSS e pipelines CSS-in-JS ainda esperam folhas de estilo planas, com um seletor por regra. Esta ferramenta pega CSS aninhado e o expande em regras planas equivalentes — a mesma transformação que os plugins Sass e PostCSS nesting realizam — então você obtém uma saída que funciona em qualquer lugar, incluindo ambientes que ainda não analisam o aninhamento nativo.

Como usar

1. Cole seu CSS aninhado (usando & e/ou blocos aninhados simples) na caixa de entrada.
2. O equivalente CSS plano achatado aparece instantaneamente na caixa de saída — um seletor por regra, com & totalmente substituído e blocos aninhados-sem-& unidos com um espaço descendente.
3. Copie ou baixe o resultado como arquivo .css.

O conversor rastreia a profundidade de chaves através de aninhamento arbitrariamente profundo, substitui todas as ocorrências de & em um seletor e envolve corretamente blocos @media/@supports aninhados ao redor dos seletores declarados dentro deles.

Escopo

Esta ferramenta suporta apenas o achatamento de CSS aninhado para CSS plano — a direção bem definida e tratável (o inverso, agrupar regras planas não relacionadas sob um pai compartilhado, requer heurísticas sobre quais seletores "pertencem juntos" que não podem ser verificadas como universalmente corretas, então é intencionalmente fora do escopo). Se sua entrada não tiver seletores aninhados, a saída terá a mesma aparência da entrada, apenas reformatada.

FAQ

Ele trata combinadores > .child, + .sibling e ~ .sibling? Sim — escreva-os exatamente como faria no aninhamento nativo (> .footer { ... }), e o combinador é preservado literalmente no seletor achatado (.card > .footer).

O que acontece com listas de seletores separadas por vírgula? Cada regra aninhada pode ter uma lista de seletores separados por vírgula em ambos os lados; a ferramenta expande cada combinação pai × filho, correspondendo à semântica de aninhamento nativo.

Ele suporta @media ou @supports aninhados? Sim — at-rules aninhadas dentro de uma regra (ou contendo regras aninhadas) são reenvolvidas em torno dos seletores achatados, preservando seu texto de condição.

Ele validará meu CSS? Não — este é um transformador estrutural, não um validador CSS. Entrada malformada (chaves desbalanceadas) é analisada com melhor esforço; se a análise falhar completamente, a saída mostra um comentário de erro curto em vez de lançar.

Privacidade

Toda a conversão acontece no seu navegador — seu CSS nunca é enviado ou armazenado em lugar nenhum.