Stylus para CSS Conversor
Converter código pré-processador Stylus para CSS padrão
Stylus de entrada
CSS convertido
Exemplos Stylus para CSS
Variáveis e aninhamento Stylus compilam para CSS puro. Exemplo:
Variáveis e seletores aninhados
Stylus de entrada:
CSS compilado:
Use Exemplo acima para carregar mais dados de exemplo.
O que é Stylus para CSS?
Stylus é um pré-processador CSS com chaves opcionais, variáveis, mixins e aninhamento. Como Sass e Less, compila para CSS padrão para navegadores. Esta ferramenta converte Stylus para CSS no seu navegador—sem etapa de build necessária. A especificação W3C CSS define a saída.
Cole Stylus ou envie um arquivo .styl. A ferramenta trata variáveis, aninhamento e o seletor pai &. É executada completamente no seu navegador. Para SCSS ou Less, SCSS para CSS ou Less para CSS. Para formatar a saída, o Formatador CSS.
Como usar esta ferramenta
Colar ou enviar Stylus
Cole seu código Stylus no editor à esquerda ou clique em Enviar para carregar um arquivo .styl. Use Exemplo para carregar Stylus de exemplo com variáveis e aninhamento.
Revisar a saída CSS
O painel direito mostra o CSS compilado. Para Stylus complexo (mixins, funções, imports), o compilador Stylus oficial pode ser necessário. Para validar, o Validador CSS.
Copiar ou baixar
Use Copiar ou Baixar para salvar o CSS. Para minificar, o Minificador CSS. Para converter CSS para SCSS ou Less, CSS para SCSS ou CSS para Less.
Onde a conversão Stylus ajuda
Stylus é usado em projetos construídos com Vite, Webpack ou Gulp. Quando você precisa compilar um snippet sem um build completo, ou inspecionar o que Stylus produz, esta ferramenta ajuda. Pipelines de build tipicamente usam o pacote Stylus oficial.
Para outros pré-processadores, SCSS para CSS ou Less para CSS. Para combinar arquivos CSS, o Combinador CSS. Para extrair CSS de HTML, o Extrator CSS.
Perguntas frequentes
Meus dados são privados?
Sim. A conversão é executada completamente no seu navegador. Nenhum dado é enviado a nenhum servidor.
Suporta todos os recursos do Stylus?
Esta ferramenta suporta variáveis, aninhamento e o seletor pai &. Mixins, funções, @import e outros recursos avançados podem precisar do compilador oficial.
Stylus vs SCSS vs Less?
Todos são pré-processadores CSS. Stylus tem sintaxe mínima (chaves/ponto e vírgula opcionais). SCSS é compatível com CSS. Less é similar ao SCSS. Use o que se encaixa na sua stack.
E darken(), lighten()?
Funções incorporadas do Stylus como darken() não são avaliadas por este conversor básico. Para suporte completo, use o compilador Stylus oficial no seu build.
Posso converter CSS para Stylus?
Esta ferramenta converte apenas Stylus para CSS. Para CSS para outro pré-processador, CSS para SCSS ou CSS para Less.