Anúncios incomodam? Ir Sem anúncios Hoje 

SCSS / Sass Formatter & Beautifier

DesenvolvedorTexto

ANÚNCIO · REMOVER?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANÚNCIO · REMOVER?

Guia

SCSS / Sass Formatter & Beautifier

Formate e melhore instantaneamente seu código SCSS. Cole folhas de estilo confusas ou compactadas e obtenha uma saída limpa e corretamente indentada com aninhamento correto, espaçamento consistente e regras at organizadas. Suporta modos de saída expandido, compacto e minificado.

Como usar

Cole seu código SCSS na área de entrada. Escolha o tamanho de indentação preferido, o formato de saída e o estilo de chave. O código formatado é atualizado instantaneamente no painel de saída - copie-o com um clique. Alterne entre os modos expandido, compacto e minificado, dependendo se você precisa de uma saída legível ou pronta para produção.

Características

Suporte a Aninhamento SCSS – Formata corretamente seletores profundamente aninhados, seletores pais ("&") e at-rules aninhadas como @media e @supports.
Manuseio de Variáveis e Mixins – Formata corretamente variáveis SCSS ("$variable), @mixin, @include, @extend, @use, e @forward diretivas.
Três Modos de Saída – Expandido (uma declaração por linha, totalmente legível), Compacto (uma regra por linha) e Minificado (todo o espaço em branco removido para produção).
Indentação Configurável – Escolha entre 2 espaços, 4 espaços ou tabulações.
Opções de Estilo de Chave – Posicionamento da chave de abertura na mesma linha ou na próxima linha.
Normalização de Espaço em Branco – Espaçamento consistente após dois pontos, antes de chaves e entre blocos de regras.
Formatação em Tempo Real – A saída é atualizada instantaneamente conforme você digita ou altera qualquer opção.

Quando usar esta ferramenta

Use esta ferramenta ao limpar folhas de estilo SCSS para revisão de código, reformatação de CSS minificado de volta para SCSS legível ou para padronizar a indentação em todos os arquivos de estilo de um projeto. É especialmente útil para converter entre formatos expandidos e minificados, ou para melhorar rapidamente trechos de SCSS para documentação e tutoriais.

ANÚNCIO · REMOVER?

 Perguntas frequentes

Qual é a diferença entre SCSS e Sass?

SCSS (Sassy CSS) e Sass são duas sintaxes para o mesmo pré-processador. SCSS usa chaves e ponto e vírgula como o CSS normal - qualquer CSS válido também é SCSS válido. A sintaxe Sass indentada usa indentação em vez de chaves e novas linhas em vez de ponto e vírgula. SCSS é muito mais popular porque é familiar para desenvolvedores CSS e mais fácil de adotar incrementalmente. A maioria dos projetos modernos usa a extensão de arquivo .scss.
O que são variáveis SCSS e por que usá-las?

Variáveis SCSS (declaradas com $) armazenam valores reutilizáveis como cores, tamanhos de fonte, espaçamento e breakpoints. Por exemplo, $cor-primaria: #3498db; permite que você referencie a mesma cor em toda a sua folha de estilo e a altere em um único lugar. Embora as propriedades personalizadas de CSS (--variável) agora ofereçam funcionalidade semelhante nativamente, as variáveis SCSS são valores em tempo de compilação que permitem recursos mais poderosos como interpolação em seletores e operações matemáticas.
O que é aninhamento SCSS e quando devo usá-lo?

O aninhamento SCSS permite escrever seletores filhos dentro de seletores pais, espelhando sua estrutura HTML. Por exemplo, .nav { .item { color: blue; } } compila para .nav .item { color: blue; }. O aninhamento melhora a legibilidade de estilos relacionados, mas o excesso de aninhamento (mais de 3-4 níveis de profundidade) cria seletores excessivamente específicos que são difíceis de substituir. A regra geral: aninhe para estrutura, não para cada relacionamento pai-filho.
Qual é a diferença entre @mixin e @extend em SCSS?

@mixin cria blocos de CSS reutilizáveis que são copiados onde quer que os @include - como uma função que produz CSS. @extend compartilha os estilos de um seletor adicionando o seletor de extensão à regra original - ele agrupa seletores em vez de duplicar código. Use @mixin quando precisar de parâmetros ou quando os estilos variarem entre os usos. Use @extend para herança de estilo simples onde você deseja uma saída CSS mínima. O uso excessivo de @extend pode criar cadeias de seletores inesperadas.