CSS de entrada

SCSS convertido

Exemplos CSS para SCSS

Seletores CSS planos são convertidos em SCSS aninhado. Exemplo:

Estrutura aninhada a partir de CSS plano

CSS de entrada:

Entrada

SCSS convertido:

Saída

Use Exemplo acima para carregar mais dados de exemplo.

O que é CSS para SCSS?

SCSS adiciona variáveis, aninhamento e mixins ao CSS. Converter CSS puro para SCSS reestrutura com aninhamento e prepara para recursos SCSS. Esta ferramenta analisa seu CSS e gera estrutura estilo SCSS. As especificações W3C CSS definem a fonte; Sass define a saída.

A conversão é executada completamente no seu navegador. Nada é enviado a nenhum servidor. A saída é SCSS válido. Para o reverso (SCSS para CSS), use SCSS para CSS. Para Less, CSS para Less.

Como usar esta ferramenta

Colar ou enviar CSS

Copie seu CSS e cole no editor à esquerda. Também pode clicar em Enviar para carregar um arquivo .css. O botão Exemplo carrega dados de exemplo. CSS inválido mostrará um erro.

Revisar a saída SCSS

O painel direito mostra SCSS convertido. Os seletores podem ser aninhados onde a estrutura permitir. Você pode adicionar variáveis e mixins manualmente após a conversão.

Copiar ou baixar

Use Copiar ou Baixar. Compile o SCSS com SCSS para CSS para verificar. Para formatar CSS primeiro, o Formatador CSS.

Quando CSS para SCSS ajuda

Ao migrar um projeto de CSS puro para SCSS, ou quando você tem CSS de uma exportação de design e quer integrá-lo em uma codebase baseada em SCSS (ex.: Bootstrap 4+, Foundation), esta conversão fornece um ponto de partida. Ferramentas de build como webpack e Vite compilam SCSS. A saída fornece estrutura aninhada que você pode refinar com variáveis e mixins.

Ferramentas de design como Figma frequentemente exportam CSS puro. Converter para SCSS aqui permite adicioná-lo a uma estrutura baseada em componentes. Para Less em vez disso, CSS para Less. Para prefixos de vendor, o Prefixador CSS.

Perguntas frequentes

Adiciona variáveis ou mixins?

O conversor foca na estrutura (aninhamento). Não extrai automaticamente valores repetidos em variáveis. Adicione variáveis e mixins manualmente conforme suas necessidades.

Meus dados são privados?

Sim. A conversão é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.

Como funciona o aninhamento?

A ferramenta infere o aninhamento das relações entre seletores. Seletores complexos podem permanecer planos. Revise e ajuste conforme necessário.

CSS para SCSS vs CSS para Less?

Ambos produzem sintaxe de pré-processador. SCSS é mais usado (Bootstrap 4+, muitos frameworks). Less é usado por Bootstrap 3, Ant Design. Escolha com base na sua stack.

Posso compilar a saída?

Sim. Cole o SCSS em SCSS para CSS para compilar e verificar. A saída deve corresponder à sua estrutura CSS original.

Ferramentas relacionadas

Para Sass/SCSS: sass-lang.com e documentação Sass. W3C CSS e MDN CSS definem o formato fonte. Ver também Bootstrap, Figma, webpack, Vite.

CSS para SCSS Conversor