SCSS de entrada

CSS compilado

Exemplos SCSS para CSS

Variáveis e aninhamento SCSS compilam para CSS puro. Exemplo:

Variáveis e seletores aninhados

SCSS de entrada:

Entrada

CSS compilado:

Saída

Use Exemplo acima para carregar mais dados de exemplo.

O que é SCSS para CSS?

SCSS (Sassy CSS) é um pré-processador CSS que adiciona variáveis, aninhamento, mixins e mais. Navegadores não executam SCSS—precisam de CSS puro. Esta ferramenta compila seu SCSS (ou SASS) para CSS pronto para navegador. A documentação Sass define a sintaxe.

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

Como usar esta ferramenta

Colar ou enviar SCSS

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

Ver o CSS compilado

O painel direito mostra o CSS compilado. As variáveis são resolvidas, o aninhamento é achatado e os mixins são expandidos. A saída é CSS puro que qualquer navegador pode usar.

Copiar ou baixar

Use Copiar ou Baixar. Para formatar a saída, o Formatador CSS. Para minificar, o Minificador CSS.

Quando SCSS para CSS ajuda

Quando você tem SCSS de um projeto, sistema de design ou codebase legado mas precisa de CSS puro—para um teste rápido, modelo de e-mail ou sistema que não suporta ferramentas de build—esta compilação ajuda. Frameworks como Bootstrap e Foundation usam SCSS. Para builds de produção, Dart Sass e webpack compilam SCSS. Também útil para depuração: ver exatamente qual CSS seu SCSS produz.

Muitos frameworks (Bootstrap, Foundation) usam SCSS. Se você personaliza variáveis ou extrai estilos, compilar aqui fornece o CSS final. Para converter CSS existente para estrutura SCSS, use CSS para SCSS.

Perguntas frequentes

SCSS vs SASS?

SCSS usa chaves como CSS. SASS usa indentação (sem chaves). Ambos compilam para o mesmo CSS. Esta ferramenta suporta ambas as sintaxes.

Suporta @import?

Imports parciais podem não ser resolvidos se os arquivos não forem enviados. Para projetos multiarquivo, use uma ferramenta de build como Dart Sass ou seu bundler. Ver Sass CLI.

Meus dados são privados?

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

E mixins e funções?

Mixins e funções são expandidos durante a compilação. O CSS de saída contém os valores resolvidos. Funções complexas são suportadas dentro das capacidades do compilador.

Posso usar com Bootstrap?

O SCSS do Bootstrap tem muitos parciais e variáveis. Para compilação completa do Bootstrap, use o build oficial ou npm. Esta ferramenta funciona para SCSS de arquivo único ou snippets.

Ferramentas relacionadas

Para Sass/SCSS: sass-lang.com e documentação Sass. MDN CSS e W3C CSS definem o formato de saída.

SCSS para CSS Conversor