Formatador SCSS

O que este formatador SCSS faz

O SCSS permite aninhar regras, guardar valores em $variáveis, reutilizar blocos com @mixin e manter configurações em maps. Esse poder faz os arquivos crescerem rápido e, quando várias pessoas editam a mesma folha de estilo, o recuo vai se perdendo. Uma pessoa escreve color:$brand, outra escreve color : $brand ;, e os blocos aninhados acabam em profundidades aleatórias.

Esta ferramenta reformata o SCSS para que cada nível de aninhamento tenha o mesmo recuo, cada declaração fique em sua própria linha e o espaçamento em volta dos dois-pontos e das chaves seja consistente. Ela usa o Prettier 3 com o parser de SCSS, rodando inteiramente no seu navegador.

Como usar

1. Cole seu SCSS na caixa da esquerda. Ele é formatado no momento em que você cola.
2. Você também pode clicar em Abrir arquivo para carregar um arquivo .scss, ou em Exemplo para ver um exemplo.
3. Escolha o Recuo: 2 espaços, 4 espaços ou tabulações.
4. Escolha a Largura da linha. Listas longas de seletores, maps e argumentos de include quebram de linha depois dessa largura.
5. Ligue Aspas simples se o seu guia de estilo preferir.
6. Clique em Formatar, ou use Ctrl+Enter na entrada.
7. Clique em Copiar, ou em Baixar para salvar um arquivo .scss.

Depois da primeira formatação, o resultado acompanha suas edições enquanto você digita. Se algo estiver errado, uma mensagem como Linha 2, coluna 3: Unclosed block aparece abaixo das caixas, e Mostrar na entrada coloca o cursor nesse ponto.

Antes e depois

Um trecho de SCSS compactado com uma variável, um mixin e regras aninhadas:

$brand:#3b82f6;@mixin card($pad:16px){padding:$pad;border-radius:8px}.nav{display:flex;gap:1rem;a{color:$brand;&:hover{text-decoration:underline}}.btn{@include card(12px)}}

Depois de Formatar com 2 espaços:

$brand: #3b82f6;
@mixin card($pad: 16px) {
  padding: $pad;
  border-radius: 8px;
}
.nav {
  display: flex;
  gap: 1rem;
  a {
    color: $brand;
    &:hover {
      text-decoration: underline;
    }
  }
  .btn {
    @include card(12px);
  }
}

Cada nível de aninhamento acrescenta um recuo, então dá para ver de relance que o &:hover pertence ao link dentro de .nav.

Os maps do Sass são distribuídos em várias linhas, uma chave por linha:

$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

Com Aspas simples ligado, @use "sass:math"; vira @use 'sass:math';. Os comentários de linha ficam exatamente onde estavam:

// Header styles
.header {
  .logo {
    width: 120px;
  }
}

Erros e limites

O formatador precisa analisar o seu arquivo antes de reescrevê-lo. Uma chave de fechamento faltando é o problema mais comum. Para esta entrada:

.nav {
  a { color: red;

a mensagem é Linha 2, coluna 3: Unclosed block, que aponta para o a { que nunca foi fechado.

Algumas coisas que vale saber:

• A ferramenta verifica a sintaxe, não o significado. Uma variável não definida ou um mixin que não existe não são apontados. O compilador do Sass encontra esses problemas.
• Ela não reordena propriedades nem ordena seletores. A sua ordem é mantida.
• A sintaxe indentada .sass não é aceita. Converta para SCSS antes, ou formate em um editor que aceite essa sintaxe.
• Não há Minificar nesta página. Minificar SCSS não faz sentido, porque os navegadores só executam CSS. Compile com o Sass e depois minifique o CSS resultante.

Dicas para um SCSS mais limpo

• Mantenha o aninhamento raso. Três níveis é um limite comum nos guias de estilo, porque aninhamentos profundos geram seletores longos e frágeis.
• Coloque variáveis e maps em um partial separado, como _tokens.scss, e carregue com @use.
• Formate antes de fazer o commit. Senão, pequenas mudanças de espaçamento acabam misturadas às mudanças reais na revisão de código.
• Se você está trabalhando com o CSS final, o formatador CSS também consegue minificá-lo.

Outras formas de formatar SCSS

• VS Code: instale a extensão do Prettier, abra o arquivo e use Formatar Documento (Shift+Alt+F no Windows, Shift+Option+F no macOS).
• Linha de comando: npx prettier --write "src/**/*.scss" formata todos os arquivos SCSS de uma pasta.
• IDEs da JetBrains, como o WebStorm, têm uma ação embutida de Reformat Code e podem usar o Prettier se ele estiver instalado no projeto.

Esta página não precisa de configuração e mantém o seu código no seu aparelho, o que a torna uma opção rápida para um trecho vindo de um chamado, de um CodePen ou da mensagem de um colega. Para o HTML que usa esses estilos, experimente o formatador HTML, e para os scripts, o formatador JavaScript.