Formateador de Less
Dé formato a hojas de estilos Less con este formateador de Less. Pegue código Less y la herramienta organiza variables, reglas anidadas, mixins con parámetros, llamadas a mixins, condiciones, funciones y media queries con una sangría de dos espacios, una declaración por línea y un espaciado uniforme después de los dos puntos y las comas. Los valores predeterminados de los parámetros de los mixins se mantienen compactos, para que los desarrolladores de front-end obtengan código Less legible sin ejecutar el compilador.
Preguntas frecuentes
¿Cómo funciona el formateador de Less?
Lee la hoja de estilos como una serie de tokens, como llaves, punto y coma, dos puntos, cadenas y comentarios, y reconstruye su estructura a partir de ellos. Cada llave de apertura inicia un bloque con una sangría de dos espacios y cada declaración va en su propia línea.
¿Cómo se formatean las variables?
Las declaraciones de variables como @color: #333; llevan un espacio después de los dos puntos y terminan con punto y coma. Las referencias a variables dentro de los valores se conservan tal como están escritas.
¿Cómo se gestionan los mixins con parámetros?
Dentro de los paréntesis de los parámetros de los mixins, los dos puntos permanecen unidos, así que .mixin(@size:10px) conserva su valor predeterminado compacto. Después de las comas entre argumentos se añade un solo espacio.
¿Se mantienen las llamadas a mixins en sus propias líneas?
Sí, las llamadas como .mixin(5px); o .bordered; terminan con punto y coma y ocupan su propia línea dentro de la regla. Los selectores anidados y las reglas &:hover llevan un nivel más de sangría.
¿Se modifican las funciones y las operaciones?
Las funciones como darken(@color, 10%) se conservan con un espacio después de cada coma, y se añade un espacio a cada lado del signo más, por lo que 1px+2px se convierte en 1px + 2px. Las condiciones como when (@a > 0) se mantienen en la línea del selector.
¿La herramienta compila o comprueba mi código Less?
No, no compila a CSS ni valida la sintaxis, por lo que también da formato a fragmentos sin terminar. Use el compilador de Less para encontrar errores y generar CSS.
¿Se conservan los comentarios?
Sí, los comentarios de línea // se conservan y terminan su línea, así que el código siguiente empieza debajo. Los comentarios de bloque se conservan donde aparecen.
¿Puedo ajustar la sangría?
No, el formateador siempre usa dos espacios y no ofrece ajustes. Por tanto, la misma hoja de estilos siempre produce el mismo resultado.
¿Por qué la salida está delimitada como less?
El resultado se devuelve como un bloque de código Markdown marcado como less, que se muestra resaltado en Markdown. Copie las líneas que hay entre los delimitadores en su archivo .less.
¿Qué tamaño puede tener mi hoja de estilos?
Hasta 5 MB por ejecución; las entradas más grandes se rechazan con un mensaje. El resultado es idéntico al de la opción Less del formateador de código.