Convertir Less a CSS — Numio
Compila Less a CSS en tu navegador. El compilador oficial less.js expande variables, anidamiento, mixins y operaciones en CSS plano, para que puedas revisar la salida sin instalar lessc.
Revisar el CSS que generan las variables, el anidamiento y los mixins de Less.
Less
CSS
Cuándo usarla
- Revisar el CSS que generan las variables, el anidamiento y los mixins de Less.
- Convertir un archivo Less pequeño para un proyecto que usa CSS plano.
Cómo usarla
- Pega código Less o abre un archivo .less.
- Elige la configuración de prefijos de proveedor para los navegadores a los que te diriges.
- Revisa el CSS generado y cópialo.
Entrada Less
@primary: #2563eb;
.button {
color: @primary;
&:hover { text-decoration: underline; }
}Salida CSS
.button {
color: #2563eb;
}
.button:hover {
text-decoration: underline;
}Detalles y limitaciones
Una variable no definida o un corchete sin cerrar detiene la compilación. Empieza con un fragmento corto cuando busques un error.
La compilación se ejecuta en tu navegador. Un @import de una URL externa puede hacer que el navegador descargue ese recurso, así que es preferible usar código autocontenido.
No están disponibles los imports de otros archivos locales, los plugins de Less ni las opciones de compilador específicas del proyecto. Los prefijos de proveedor dependen de la configuración de navegadores de destino.
FAQ
¿Es lo mismo que compilar con lessc?
Usa less.js, el mismo compilador que ejecuta lessc, así que un archivo autocontenido se compila al mismo CSS con las opciones predeterminadas. Las funciones propias de un proyecto, como los imports locales y los plugins, no están disponibles aquí.
¿Puedo compilar un archivo que usa @import?
Los imports que apuntan a otros archivos de tu equipo no se pueden resolver en el navegador. Pega el código importado directamente o compila todo el proyecto con lessc.
¿Cuál es la diferencia entre Less y CSS?
Less es un preprocesador de CSS. Añade variables, anidamiento, mixins y funciones, y tiene que compilarse a CSS antes de que un navegador pueda usarlo.