Ferramentas CSS

Uma caixa de ferramentas CSS completa: formatar/embelezar, minimizar/compactar, validar a sintaxe, compilar SCSS/Sass & LESS para CSS, e converter de forma inversa o CSS de volta para SCSS ou LESS.
Todo o processamento é feito localmente no seu navegador — os seus dados nunca são enviados para nenhum servidor.
Modo:
CSS / SCSS / LESS / SASS de entrada
Resultado
Como utilizar: cole o seu CSS/SCSS/LESS/SASS na área de texto da esquerda, escolha um modo e clique em Processar (ou simplesmente escreva — processamento automático ao introduzir).
Como funciona cada modo
Formatar CSS: formata o CSS com indentação consistente (2/4 espaços ou tabulações), uma propriedade por linha. Trata regras @ aninhadas como @media, @keyframes, @supports. Preserva os comentários (tanto /* */ como de linha única). Altere o seletor Indentação para alternar entre 2 espaços, 4 espaços ou tabulações.
Minimizar: remove todos os espaços em branco desnecessários, comentários e caracteres redundantes para produzir o CSS mais compacto. Ideal para implementação em produção, para reduzir o tamanho do ficheiro e a largura de banda. Verifique a barra de estatísticas para ver a taxa de compressão.
Validar: analisa o CSS e verifica a existência de erros de sintaxe. Comunica os erros de análise com o número exato de linha e coluna. Mostra também estatísticas: número de regras, seletores, declarações e regras @.
Formatar SCSS: reformata folhas de estilo SCSS/Sass com indentação consistente. Trata toda a sintaxe específica do SCSS: $variáveis, @mixin/@include, @extend, o controlo de fluxo @if/@for/@each, interpolação #{$var}, e comentários de linha única //. Preserva a estrutura de seletores aninhados e indenta corretamente os blocos aninhados. Altere o seletor Indentação para alternar entre 2 espaços, 4 espaços ou tabulações.
Formatar LESS: reformata folhas de estilo LESS com indentação consistente. Trata toda a sintaxe específica do LESS: @variáveis, mixins paramétricos, guardas (when), interpolação @{var}, fusão e comentários de linha única //. Preserva a estrutura de seletores aninhados e indenta corretamente os blocos aninhados. Altere o seletor Indentação para alternar entre 2 espaços, 4 espaços ou tabulações.
SCSS → CSS: compila folhas de estilo SCSS/Sass para CSS simples, usando o compilador oficial Dart Sass (v1.102). Suporta variáveis ($var), aninhamento, mixins (@mixin, @include), funções, @extend, o controlo de fluxo @if/@for/@each, e os módulos Sass modernos (@use, @forward). O compilador Sass (~5,4 MB) é carregado sob demanda na primeira vez que usar este modo.
LESS → CSS: compila folhas de estilo LESS para CSS simples. Suporta variáveis (@var), aninhamento, mixins, mixins paramétricos, operações, funções, guardas e importação (@import). O compilador (~150 KB) é carregado sob demanda na primeira vez que usar este modo.
SASS → CSS: compila a sintaxe SASS com indentação (ficheiros .sass, sem chavetas nem pontos e vírgula) para CSS simples, usando o Dart Sass. O SASS com indentação usa espaços em branco significativos em vez de chavetas, o que o torna mais conciso. O mesmo compilador Dart Sass (~5,4 MB) trata tanto a sintaxe SCSS como a SASS com indentação.
CSS → SCSS: converte CSS padrão para a sintaxe SCSS com refatoração automática de aninhamento. Deteta padrões do tipo BEM e move seletores .pai-filho para blocos aninhados &-filho. Converte seletores descendentes em regras aninhadas, seletores de pseudo-classe em &:estado, e extrai as propriedades personalizadas repetidas do CSS para $variáveis SCSS. Se o seu CSS tiver uma estrutura plana e repetitiva, esta ferramenta ajuda a refatorá-lo em SCSS aninhado e mais limpo.
CSS → LESS: converte CSS padrão para a sintaxe LESS com refatoração automática de aninhamento. O mesmo tipo de aninhamento que CSS→SCSS: deteta padrões repetidos de elemento pai, seletores descendentes e pseudo-classes. Extrai as propriedades personalizadas repetidas do CSS para @variáveis LESS. O resultado é código LESS aninhado e limpo.
Cascata, especificidade e porque é que os estilos entram em conflito

Quando várias regras visam o mesmo elemento, a especificidade decide o vencedor: os estilos inline vencem os ids, os ids vencem as classes, as classes vencem os seletores de elemento, e a ordem no código-fonte desempata. A marca !important sobrepõe-se a esta aritmética — e torna a sobreposição seguinte ainda mais difícil.

A especificidade é calculada por seletor, e não somada a partir do contexto — uma regra mais específica vence seja onde for que apareça na folha de estilos.