🔄Conversores

Conversor Stylus para CSS

Explica como passar templates Stylus (sintaxe opcional sem chaves) para CSS padrão, com exemplos.

Stylus CSS

Suporta regras planas (sem aninhamento).

Stylus permite omitir { }, : e ;. Exemplo:

.btn\n  color white\n  padding 8px

Em CSS:

.btn { color: white; padding: 8px; }

Variáveis usam $nome = valor sem prefixo obrigatório.

Stylus indentado de volta para CSS comum

Projeto antigo escrito em Stylus, quem escreveu já saiu e ninguém quer instalar toolchain só para descobrir o que aquele arquivo produz. Ou você quer jogar um trecho no CodePen, que espera CSS. Cole o Stylus indentado no campo de cima e a versão com chaves, dois pontos e ponto e vírgula aparece embaixo, pronta para copiar com um clique no botão.

A leitura é por indentação: linha que começa na coluna zero é seletor, linha indentada é declaração. Cada declaração é cortada no primeiro espaço em branco, então a primeira palavra vira a propriedade e o resto vira o valor — é por isso que padding 8px 12px sai como padding: 8px 12px;. Escreva sem os caracteres opcionais: se deixar os dois pontos do Stylus, eles entram no nome da propriedade e a saída sai com dois pontos duplicados.

Só regras planas. Aninhamento, &:hover, mixins, variável na forma $nome = valor, condicional e aritmética não são avaliados, e essas linhas terminam como declarações estranhas dentro da regra anterior. Para uma folha de estilo real, compile com a ferramenta oficial (npm i -g stylus e depois stylus -p arquivo.styl). Para um trecho curto e plano, aqui é mais rápido, e roda no navegador com botões de copiar e limpar.

Perguntas frequentes

Ele resolve variáveis e mixins?

Não. Nada é avaliado; é uma tradução de formato, linha por linha. Variável e mixin precisam do compilador oficial do Stylus.

Devo incluir os dois pontos na entrada?

Melhor não. Escreva color white, sem dois pontos e sem ponto e vírgula. Se deixar color: white, a saída mostra dois pontos duplicados e você limpa na mão.

Indentação com tab funciona?

Sim, tab e espaço marcam a linha como declaração do mesmo jeito. O que importa é a linha do seletor começar na coluna zero.

Ferramentas Relacionadas

🔄

Conversor CSS para Stylus

Converta CSS para a sintaxe enxuta do Stylus, sem chaves nem ponto e vírgula. Cole o CSS e copie o Stylus pronto para modernizar a estilização do projeto.

🔄

Conversor SCSS para CSS

Remove sintaxes SCSS simples (variáveis e comentários // ) para produzir um CSS aproximado para inspeção.

🔄

Conversor CSS para LESS

Converta folhas de estilo CSS para a sintaxe LESS, transformando custom properties (--var) em variáveis @var. Modernize seu CSS e copie o código pronto para usar.