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.
Conversor CSS para Stylus
Converta CSS para a sintaxe enxuta do Stylus, sem chaves nem ponto e vírgula. Cole o CSS e copie o Stylus pronto para modernizar a estilização do projeto.
Conversor Stylus para CSS
Explica como passar templates Stylus (sintaxe opcional sem chaves) para CSS padrão, com exemplos.
Conversor CSS para LESS
Converta folhas de estilo CSS para a sintaxe LESS, transformando custom properties (--var) em variáveis @var. Modernize seu CSS e copie o código pronto para usar.