Converter SCSS para CSS Online
Compile SCSS/Sass para CSS puro no seu navegador. Sem npm, sem Node.js, sem instalação.
.card {
background: #c4552d;
border-radius: 8px;
padding: 1rem;
}
.card:hover {
opacity: 0.9;
}
.card .title {
font-size: 1.2rem;
color: white;
}Compilador SCSS para CSS
Por que usar este compilador SCSS?
Zero configuração
Sem npm install, sem webpack, sem Vite. Cole seu SCSS e obtenha CSS em segundos.
Dart Sass oficial
Usa o compilador oficial Dart Sass (WebAssembly). Total compatibilidade com o padrão moderno.
Total privacidade
Tudo roda no seu navegador. Seu código nunca é enviado a nenhum servidor.
Mixins, variáveis, aninhamento
Suporte completo: $variáveis, seletores &, @mixin/@include, @extend e loops.
Como funciona
Três passos, sem complicação
Escreva ou cole seu SCSS
Cole seu código SCSS ou Sass no editor. Variáveis, aninhamento, mixins, funções e seletores de pai (&) são todos suportados.
Compilação instantânea
O CSS puro resultante aparece automaticamente no painel direito. O compilador roda localmente no seu navegador.
Copie ou baixe o CSS
Copie o CSS gerado para a área de transferência ou baixe como arquivo .css pronto para produção.
Perguntas frequentes
Ficou com dúvidas?
O Sass tem duas sintaxes. A sintaxe original (extensão .sass, criada em 2006) usa indentação em vez de chaves e ponto e vírgula — é mais compacta, mas quebra a compatibilidade com CSS padrão. SCSS (Sassy CSS, extensão .scss) foi introduzido no Sass 3.0 em 2010 com uma sintaxe totalmente compatível com CSS: qualquer CSS válido é SCSS válido. O SCSS rapidamente se tornou o padrão de facto e é o que a maioria dos desenvolvedores usa hoje. Esta ferramenta suporta ambas as sintaxes.
Variáveis SCSS são definidas com o prefixo $ e podem armazenar cores, tamanhos, fontes ou qualquer valor CSS. Por exemplo: $primary-color: #3498db; $base-font: Inter, sans-serif; $spacing: 16px. Elas são usadas diretamente nas propriedades: color: $primary-color. Ao contrário das custom properties do CSS (--variavel), as variáveis SCSS são resolvidas em tempo de compilação e não existem no CSS de saída. Para acesso dinâmico em tempo de execução com JavaScript, as custom properties do CSS são a ferramenta adequada.
A comunidade SCSS tem uma regra não escrita: não passar de 3 a 4 níveis de aninhamento. Aninhamento profundo gera seletores CSS muito específicos que são difíceis de sobrescrever e aumentam a especificidade desnecessariamente. A metodologia BEM (Block-Element-Modifier) combina bem com SCSS porque limita o aninhamento a 1 ou 2 níveis enquanto mantém a estrutura clara. O seletor de pai & é útil para pseudo-classes como :hover e :focus e para modificadores sem aumentar a profundidade semanticamente.
Sim. Mixins são um dos pilares do SCSS: definidos com @mixin nome($params) e invocados com @include nome(valores). Eles permitem reutilizar blocos de CSS com variações — algo que o CSS padrão só alcançou parcialmente com custom properties. A ferramenta também suporta @extend (herança de seletores), @function (funções personalizadas), @each, @for e @while (loops), e @if/@else (condicionais).
Há casos em que configurar um ambiente Node.js não é prático: explorar SCSS rapidamente sem criar um projeto, trabalhar em uma máquina onde você não tem permissão para instalar pacotes, fazer uma demonstração ao vivo, revisar o CSS de saída de um snippet específico ou simplesmente aprender a sintaxe. Esta ferramenta usa o compilador oficial Dart Sass (a implementação de referência atual desde que o LibSass foi depreciado em outubro de 2020) compilado para WebAssembly, garantindo total compatibilidade com o padrão SCSS moderno.
LibSass foi a implementação do Sass em C/C++ usada pelo pacote npm node-sass, que foi durante anos a forma mais popular de compilar SCSS em projetos Node.js. A equipe do Sass depreciou o LibSass em outubro de 2020 por não conseguir acompanhar o ritmo das novas especificações. Dart Sass — a implementação oficial escrita em Dart e publicada como JavaScript puro para npm como o pacote sass — é desde então a implementação de referência. Se você tem projetos usando node-sass, é recomendável migrar para o pacote sass; ele é um substituto direto na maioria dos casos.
SCSS para CSS online: compile Sass sem npm ou Node.js no navegador
Sass (Syntactically Awesome Style Sheets) é uma linguagem de pré-processamento de CSS criada por Hampton Catlin e desenvolvida principalmente por Natalie Weizenbaum (a autora principal durante a maior parte da sua história) e Chris Eppstein. A primeira versão foi lançada em novembro de 2006 como parte do framework Haml para Ruby. A sintaxe original usava indentação em vez de chaves, inspirada em Python e YAML, tornando-a mais compacta mas incompatível com CSS existente. Essa barreira de adoção foi o catalisador para a criação do SCSS (Sassy CSS), introduzido no Sass 3.0 em outubro de 2010: uma nova sintaxe totalmente compatível com CSS3 onde qualquer arquivo CSS válido é também SCSS válido. Os recursos centrais do SCSS — variáveis com prefixo $, aninhamento de seletores, o seletor de pai & para pseudo-classes e variantes, as diretivas @mixin e @include para reutilização de código e @extend para herança — resolveram os problemas de manutenibilidade do CSS puro em grande escala que a indústria enfrentava há anos.
O ecossistema de pré-processadores CSS viveu seu auge entre 2012 e 2018. LESS (criado por Alexis Sellier em 2009) foi o primeiro concorrente sério do Sass, usando @ em vez de $ para variáveis e ganhando adoção massiva graças ao Bootstrap 3 (2013). Stylus (criado por TJ Holowaychuk em 2010) ofereceu uma sintaxe ainda mais flexível, mas com menor adoção. O SCSS venceu a disputa do ecossistema em parte pela adoção no Bootstrap 4 (2018, que migrou de LESS para SCSS), em parte pela integração em frameworks como o Compass (Chris Eppstein, 2009) que adicionou funções avançadas e sprites automáticos, e em parte por ser o padrão no Angular (que gera projetos com SCSS por padrão). As implementações do Sass evoluíram significativamente: Ruby Sass (2006 a 2019, a implementação original, agora sem manutenção), LibSass (implementação em C/C++ usada pelo node-sass, depreciado em outubro de 2020) e Dart Sass (a implementação de referência atual, lançada em 2016 e disponível como pacote npm sass desde 2018).
A necessidade de um compilador SCSS online surge em contextos muito específicos do fluxo de trabalho de desenvolvimento frontend. O mais frequente é a exploração rápida: um desenvolvedor quer testar como um mixin específico compila, verificar que uma função de cor funciona como esperado ou entender o CSS de saída de um padrão de aninhamento específico sem criar um novo projeto. A alternativa mais próxima é o Sass Playground oficial (sass-lang.com/playground), mas sua interface é minimalista e não oferece recursos adicionais como cópia rápida ou download. Outro caso é trabalhar em ambientes sem permissão de instalação: máquinas corporativas com restrições de npm, ambientes de CI/CD somente leitura ou sessões de treinamento onde não é possível garantir que todos os participantes tenham Node.js configurado. O compilador do Convertir.ai usa Dart Sass compilado para WebAssembly, que roda inteiramente no seu navegador em velocidades comparáveis ao compilador nativo, sem enviar nenhuma linha de código para servidores externos. Isso o torna seguro para compilar folhas de estilo de projetos em produção ou com código proprietário.