Sass para CSS
Compile Sass e SCSS para CSS online. Conversão em tempo real com saída expandida ou comprimida, erros com número de linha e suporte total a variáveis, mixins e aninhamento.
Qual a diferença entre Sass e SCSS?
SCSS é a sintaxe mais recente, semelhante ao CSS, que usa chaves e ponto e vírgula. Sass (a sintaxe indentada) usa indentação e quebras de linha. Esta ferramenta compila as duas: escolha a sintaxe no menu.
Quais recursos do Sass são suportados?
O compilador usa o motor oficial Dart Sass, então variáveis, aninhamento, mixins, @include, funções, @use, @extend, diretivas de controle como @if e @each e o estilo de saída comprimido são todos suportados.
Como obter CSS comprimido?
Mude o menu de estilo de saída para Comprimido antes de compilar. Espaços em branco e o ponto e vírgula final são removidos, gerando a folha de estilos menor possível.
Por que o erro mostra um número de linha?
Quando seu código tem um erro de sintaxe, o motor Sass informa a linha e a coluna exatas em que a análise falhou, e a ferramenta exibe isso acima da saída para corrigir rapidamente.
Meu código Sass é enviado a um servidor?
Não. O motor Dart Sass completo vem embutido na página e compila localmente no seu navegador. Suas folhas de estilo nunca saem do dispositivo, sendo seguro até para projetos privados.
Posso compilar @import de arquivos locais?
Não. O compilador trabalha sobre um único trecho em memória e não acessa seu sistema de arquivos, então imports baseados em arquivos e @use de parciais externos não podem ser resolvidos.
Funciona offline?
Sim. Depois que a página e o pacote do compilador carregam uma vez, a compilação acontece inteiramente na sua máquina, sem precisar de conexão.
Como uso o resultado?
Copie o CSS compilado para a área de transferência ou baixe como style.css com os botões abaixo da saída, depois vincule no seu HTML ou cole na folha de estilos do projeto.
Como usar Sass para CSS
Este compilador executa o motor oficial do Dart Sass inteiramente no seu navegador. Cole SCSS ou Sass indentado e receba CSS limpo na hora — variáveis, mixins, aninhamento e funções suportados, nada é enviado.
- Cole seu Sass ou SCSS na caixa de entrada, ou clique em Exemplo para carregar uma demonstração funcional com variável e mixin.
- Escolha a sintaxe (SCSS ou Sass indentado) e o estilo de saída (Expandido ou Comprimido) nos menus suspensos.
- Com a Compilação ao vivo ativada, o CSS aparece enquanto você digita; caso contrário, clique em Compilar para rodar manualmente.
- Se houver erro de sintaxe, o número exato da linha e a mensagem aparecem acima da saída para você corrigir rápido.
- Use Copiar ou Baixar abaixo da saída para levar sua folha de estilo compilada como style.css.
Escolha o estilo de saída Comprimido para minificar sua folha de estilo — ótimo para builds de produção direto do código-fonte.
Ferramentas relacionadas
- Embelezador CSS Formate e embeleze código CSS instantaneamente. Converta CSS minificado em código legível e bem indentado com opções personalizáveis.
- Minificador CSS Minificador CSS online gratuito. Comprima e otimize código CSS instantaneamente removendo espaços, comentários e caracteres desnecessários. Reduza o tamanho do arquivo para melhor desempenho web.
- Gerador de Gradientes CSS Crie gradientes CSS impressionantes visualmente. Gere gradientes lineares, radiais e cônicos com múltiplas paradas de cor, ângulos e posições. Copie código CSS pronto para produção instantaneamente.
- Gerador CSS Flexbox Gerador visual CSS Flexbox com visualização ao vivo. Ajuste propriedades flex e obtenha código CSS pronto para usar.
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Testador de Requisições HTTP Teste APIs REST diretamente no seu navegador. Envie requisições GET, POST, PUT, DELETE com headers, body e parâmetros personalizados. Veja status, headers e corpo JSON instantaneamente.
- Gerador .htaccess Gere regras .htaccess do Apache para redirecionamentos, reescritas, cabeçalhos de segurança, cache e mais.