Conversor SASS para CSS
Explica diferenças entre a sintaxe indentada do SASS (.sass) e o CSS, com exemplos comparativos.
Copiado!
Suporta regras planas (sem aninhamento).
SASS (.sass) usa indentação ao invés de chaves. Exemplo:
.box\n color: red\n padding: 8pxEquivalente em CSS:
.box {\n color: red;\n padding: 8px;\n}Variáveis: $cor: red. Aninhamento e mixins seguem mesma lógica do SCSS.
Da indentação para chaves e ponto e vírgula
Alguém te mandou um trecho em .sass, aquele dialeto sem chaves e sem ponto e vírgula, e o seu projeto usa .scss ou CSS puro. A conversão é só reformatação, mas fazer à mão em trinta linhas rende exatamente o que você imagina: um ponto e vírgula faltando e uma chave sobrando, descobertos quando o build quebra. Cole o bloco indentado e pegue a versão com chaves do outro lado.
A leitura é por indentação. Linha que começa na coluna zero é tratada como seletor e abre um bloco; linha indentada é tratada como declaração e é partida no primeiro dois pontos, virando propriedade e valor com ponto e vírgula no fim. É reformatação de sintaxe, não compilação: nada é resolvido, nada é calculado. O aviso abaixo do campo diz o limite em voz alta, só regras planas, e vale levar a sério.
Aninhamento não funciona aqui. Uma linha indentada com o e comercial de referência ao pai é lida como se fosse declaração e sai deformada, e os filhos dela acabam misturados no bloco de cima. Variável com cifrão na coluna zero também é lida como seletor. Use em blocos planos, para leitura e conversão rápida. Se o arquivo tem aninhamento, mixin ou include, rode o compilador oficial do Sass. Há botão de copiar e tudo acontece no navegador.
Perguntas frequentes
Qual a diferença entre .sass e .scss?
Ele resolve variáveis e mixins?
E se o meu trecho tiver blocos aninhados?
Ferramentas Relacionadas
Conversor CSS para SASS
Converta CSS tradicional para a sintaxe indentada do SASS, sem chaves nem ponto e vírgula. Cole o CSS e copie o SASS pronto para o seu projeto.
Conversor SCSS para CSS
Remove sintaxes SCSS simples (variáveis e comentários // ) para produzir um CSS aproximado para inspeção.
Conversor CSS para SCSS
Adapta CSS para SCSS preservando regras e convertendo variáveis CSS em variáveis SCSS quando detectadas.