Converter Sass para CSS Online
Compile sintaxe Sass indentada (.sass) para CSS puro. De graça, no seu navegador, sem Ruby, Dart ou Node.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Casos de uso
Sass para CSS: compile estilos sem instalar Ruby, Dart ou Node
Sem instalação
Compile Sass diretamente no navegador sem precisar instalar Ruby, Dart, Node.js ou qualquer ferramenta de build.
CSS limpo e formatado
O CSS gerado é legível, bem indentado e pronto para revisar ou usar diretamente no seu projeto.
100% privado
Seu código Sass nunca sai do seu navegador. Nenhum dado é enviado para servidores externos.
Resultado imediato
Compile e visualize o CSS resultante em tempo real sem configurar nenhum pipeline de build.
Como funciona
Três passos, sem complicação
Cole seu código Sass
Cole o conteúdo .sass (sintaxe indentada, sem chaves e sem ponto e vírgula) no editor. O conversor aceita apenas a sintaxe indentada do Sass, não o SCSS com chaves.
Compilação para CSS no navegador
O compilador Sass integrado processa seu código e gera CSS puro e válido. Variáveis, aninhamento, mixins e outras funcionalidades do Sass são resolvidas no resultado CSS final.
Copie ou baixe o CSS
Copie o CSS gerado para usar diretamente no seu projeto ou baixe o arquivo .css. Pronto para incluir em qualquer página HTML ou framework.
Perguntas frequentes
Ficou com dúvidas?
Sass tem duas sintaxes. A sintaxe SCSS (Sassy CSS) usa chaves e ponto e vírgula, sendo praticamente um superconjunto do CSS. A sintaxe Sass indentada (arquivos .sass) usa indentação no lugar de chaves e não usa ponto e vírgula, resultando em um código mais compacto. Este conversor é específico para a sintaxe .sass indentada. Se você usa arquivos .scss, precisa de um conversor SCSS para CSS.
O compilador suporta as funcionalidades principais do Sass: variáveis ($variavel), aninhamento de seletores, mixins (@mixin e @include), herança (@extend), operações matemáticas, funções de cor e string, diretivas de controle (@if, @for, @each, @while) e parciais com @import. Funcionalidades mais recentes como @use e @forward (Dart Sass moderno) podem ter suporte parcial dependendo da versão do compilador.
Para depuração rápida, experimentação ou quando você não quer configurar um ambiente de build. Verificar se um trecho de Sass compila corretamente, testar a saída de um mixin específico, ou converter um arquivo Sass legado sem instalar Ruby Sass (descontinuado) ou configurar Node.js são casos de uso práticos para um compilador online.
Por padrão, o CSS gerado é formatado e legível, com indentação e quebras de linha. Isso facilita a leitura e depuração do resultado. Se você precisar de CSS minimizado para produção, pode passar o resultado por um minimizador CSS.
Não. Por ser executado no navegador sem acesso ao sistema de arquivos, o compilador não pode resolver importações de arquivos externos. Você pode incluir o conteúdo dos parciais manualmente no editor antes de compilar.
Não. A compilação acontece inteiramente no seu navegador usando uma implementação JavaScript do compilador Sass. Seu código nunca é transmitido para servidores externos, sem necessidade de conta ou cadastro.
Compilar Sass para CSS: converta sintaxe indentada .sass para CSS puro no navegador
Sass (Syntactically Awesome Style Sheets) foi criado por Hampton Catlin em 2006 como uma extensão do CSS que adiciona funcionalidades como variáveis, aninhamento, mixins e herança, tornando o código de estilos mais organizado e reutilizável. Sass tem duas sintaxes diferentes: a sintaxe indentada original (arquivos .sass), que usa espaços no lugar de chaves e não requer ponto e vírgula, e a sintaxe SCSS (arquivos .scss), que foi introduzida em 2010 e é compatível com CSS padrão. A sintaxe .sass original é mais concisa, mas exige atenção especial à indentação. Para usar Sass em projetos, é necessário um compilador que transforme o código .sass em CSS puro que os navegadores entendem.
Historicamente, o compilador original do Sass era escrito em Ruby e exigia a instalação de Ruby e a gem sass. Com a descontinuação do Ruby Sass em março de 2019, o compilador de referência passou a ser o Dart Sass, escrito em Dart. Para projetos Node.js, existe também o sass npm package que é uma versão compilada do Dart Sass em JavaScript. Em ambientes de build modernos como Webpack, Vite e Parcel, o Sass é processado automaticamente como parte do pipeline. No entanto, para depurar rapidamente um trecho de Sass, converter um arquivo legado ou experimentar funcionalidades sem configurar todo um ambiente de build, um compilador online é significativamente mais ágil.
O compilador Sass para CSS da Convertir.ai usa uma implementação JavaScript do compilador Sass que roda diretamente no navegador, sem necessidade de servidor, sem instalação de dependências e sem envio de código para sistemas externos. Isso é particularmente relevante para desenvolvedores que trabalham com código proprietário ou arquivos de estilos de projetos confidenciais: o código nunca sai do seu dispositivo. O compilador suporta as principais funcionalidades da sintaxe .sass indentada, incluindo variáveis, mixins, aninhamento, herança, operações matemáticas e diretivas de controle, cobrindo os casos de uso mais comuns de projetos que ainda usam a sintaxe Sass clássica.