Formatter de SCSS

Ele lê a folha de estilos como tokens, como chaves, ponto e vírgula, dois-pontos, strings e comentários, e reconstrói a disposição a partir deles. Cada chave de abertura inicia um bloco indentado, e cada declaração termina em sua própria linha.

Sim, regras aninhadas e seletores pais como &:hover são indentados um nível a mais que o elemento pai, com dois espaços por nível. Os dois-pontos dos seletores permanecem junto deles, então &:hover não é dividido.

Variáveis como $color: #333; recebem um espaço após os dois-pontos, e @mixin e @include mantêm seus argumentos com um espaço após cada vírgula. Diretivas de controle como @if, @each e @for recebem um espaço antes do parêntese.

Sim, interpolações como #{$name} são copiadas exatamente como foram escritas. Isso inclui interpolações dentro de seletores, como .icon-#{$name}, e dentro de nomes de propriedades.

Não, ela não compila para CSS nem verifica a sintaxe, então também formata trechos incompletos. Use o compilador Sass para encontrar erros e gerar CSS.

Sim. Comentários de linha iniciados por // terminam no fim da linha, e comentários de bloco são mantidos onde aparecem.

Não, ele foi desenvolvido para SCSS, que usa chaves e ponto e vírgula. Arquivos na sintaxe .sass indentada não têm chaves para servir de referência à indentação, então converta-os para SCSS primeiro.

Não, a saída sempre usa dois espaços e o formatador não tem opções. Assim, a mesma folha de estilos sempre produz o mesmo resultado.

A saída é retornada como um bloco de código Markdown identificado como scss, para ser exibida com realce de sintaxe. Copie as linhas entre as cercas para o seu arquivo .scss.

Até 5 MB por execução; entradas maiores são rejeitadas com uma mensagem. A saída é idêntica à opção SCSS do Code Formatter.