Stylus a CSS Convertidor
Convertir código preprocesador Stylus a CSS estándar
Stylus de entrada
CSS convertido
Ejemplos Stylus a CSS
Las variables y anidación de Stylus se compilan a CSS plano. Ejemplo:
Variables y selectores anidados
Stylus de entrada:
CSS compilado:
Usa Ejemplo de arriba para cargar más datos de ejemplo.
¿Qué es Stylus a CSS?
Stylus es un preprocesador CSS con llaves opcionales, variables, mixins y anidación. Como Sass y Less, compila a CSS estándar para navegadores. Esta herramienta convierte Stylus a CSS en tu navegador—sin paso de build. La especificación W3C CSS define la salida.
Pega Stylus o sube un archivo .styl. La herramienta maneja variables, anidación y el selector padre &. Se ejecuta completamente en tu navegador. Para SCSS o Less, SCSS a CSS o Less a CSS. Para formatear la salida, el Formateador CSS.
Cómo usar esta herramienta
Pegar o subir Stylus
Pega tu código Stylus en el editor izquierdo o haz clic en Subir para cargar un archivo .styl. Usa Ejemplo para cargar Stylus de ejemplo con variables y anidación.
Revisar la salida CSS
El panel derecho muestra el CSS compilado. Para Stylus complejo (mixins, funciones, imports), puede ser necesario el compilador Stylus oficial. Para validar, el Validador CSS.
Copiar o descargar
Usa Copiar o Descargar para guardar el CSS. Para minificar, el Minificador CSS. Para convertir CSS a SCSS o Less, CSS a SCSS o CSS a Less.
Dónde ayuda la conversión Stylus
Stylus se usa en proyectos construidos con Vite, Webpack o Gulp. Cuando necesitas compilar un snippet sin un build completo, o inspeccionar qué produce Stylus, esta herramienta ayuda. Los pipelines de build suelen usar el paquete Stylus oficial.
Para otros preprocesadores, SCSS a CSS o Less a CSS. Para combinar archivos CSS, el Combinador CSS. Para extraer CSS de HTML, el Extractor CSS.
Preguntas frecuentes
¿Mis datos son privados?
Sí. La conversión se ejecuta completamente en tu navegador. No se envía ningún dato a ningún servidor.
¿Soporta todas las características de Stylus?
Esta herramienta soporta variables, anidación y el selector padre &. Mixins, funciones, @import y otras características avanzadas pueden necesitar el compilador oficial.
¿Stylus vs SCSS vs Less?
Todos son preprocesadores CSS. Stylus tiene sintaxis mínima (llaves/punto y coma opcionales). SCSS es compatible con CSS. Less es similar a SCSS. Usa el que encaje con tu stack.
¿Qué pasa con darken(), lighten()?
Las funciones incorporadas de Stylus como <code>darken()</code> no se evalúan con este convertidor básico. Para soporte completo, usa el compilador Stylus oficial en tu build.
¿Puedo convertir CSS a Stylus?
Esta herramienta solo convierte Stylus a CSS. Para CSS a otro preprocesador, CSS a SCSS o CSS a Less.