Compilador SCSS para CSS — Sass Online

O que o compilador faz

Este é o Dart Sass, a implementação de referência do Sass, rodando no seu navegador. Tudo da linguagem funciona: variáveis, aninhamento com &, mixins e @include, @extend, funções, mapas, laços, condições @if e o sistema de módulos com @use para os módulos embutidos, como sass:math e sass:color.

SCSS vs Sass indentado

SCSS é um superconjunto de CSS com chaves e ponto e vírgula — qualquer CSS válido é SCSS válido. A sintaxe indentada mais antiga (arquivos .sass) usa indentação no lugar de chaves e quebras de linha no lugar de ponto e vírgula. As duas compilam para o mesmo CSS; use a que os seus arquivos usam.

Importações de outros arquivos

O navegador não consegue ler os outros arquivos do seu projeto, então @use "variables" ou @import "mixins" dos seus próprios parciais não serão resolvidos aqui. Cole o conteúdo dos parciais acima do código que os usa. Avisos de descontinuação do Sass — por exemplo, para darken() — aparecem abaixo da saída, com a substituição sugerida.

Privado por design

A compilação roda inteiramente no seu navegador — seu código nunca é enviado, então é seguro para projetos proprietários.

Também pesquisado como: sass para css, compilador scss online, compilar sass online, converter scss para css, conversor scss, compilador sass.

Ferramentas que combinam com: SCSS para CSS

• Compilador LESS para CSS — Cole seu código Less e receba CSS puro, compilado pelo motor oficial Less.js direto no seu navegador.
• Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.
• Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
• Conversor CSS para Tailwind — Cole regras ou declarações CSS e receba as classes utilitárias do Tailwind equivalentes para cada seletor — incluindo estados hover: e valores arbitrários como p-[13px].