¿Hay alguna manera de compilar MENOS archivos en CSS (para que no todos los navegadores tengan que hacerlo)?

20

Estoy considerando usar MENOS, pero me estremezco ante la idea de que un navegador tenga JavaScript deshabilitado y mi CSS no sea legible (y el sitio se vea horrible).

Además, ofende al ingeniero en mí forzar a cada navegador a "compilar" ese archivo Less a .css cuando podríamos "compilarlo" una vez cada vez que lo modifiquemos.

css css-framework Clay Nichols
fuente
1
@ Anónimo: si echa un vistazo a MENOS, también debería echar un vistazo a SASS y COMPASS.
Sorcy
Stylus y OOCSS también son productos similares.
Lèse majesté
1
He publicado una respuesta relacionada que explica cómo configurar MENOS compilación automáticamente en el servidor: webmasters.stackexchange.com/questions/38386/…
romaninsh
3
¡No sabía que alguien estaba compilando MENOS en los navegadores!
Kenny Evitt

Respuestas:

17

Sí. Puede usar una aplicación que autocompila archivos MENOS a CSS en su máquina de desarrollo a medida que codifica. Luego, simplemente suba el archivo CSS generado a su servidor cuando haya terminado de desarrollar.

Mella
fuente
10

MENOS viene con un binario (lessc) que le permite precompilar sus archivos .less. Lo usas como tal:

 $ lessc styles.less > styles.css

Pero creo que la mayoría de las personas solo usan el comando lessc -wo lessc --watchpara recompilar la hoja de estilo CSS automáticamente cada vez que se actualiza el archivo LESS. También puede hacer que Lessc minimice el CSS, por ejemplo lessc -w -x.

Editar: solo para aclarar, lessc viene con la instalación del lado del servidor (es decir, cuando instala menos a través del administrador de paquetes node.js). Pero puede descargarlo manualmente desde GitHub .

Lessc se encuentra en /bin/lessc. Esto es por supuesto un binario * nix (también debe trabajar para Mac), pero no es un binario de Windows ( lessc.exe ) basado en dotless, que es otro compilador de Windows MENOS.

Actualización: se usa less-watchpara compilar automáticamente.

Alternativamente, muchos desarrolladores en estos días usan corredores de tareas como gruntpara manejar la automatización de compilación (compilación, minificación, prueba, etc.). Utilizando grunt-contrib-watch, grunt-contrib-lessy grunt-contrib-livereload, realmente se puede agilizar el flujo de trabajo de desarrollo.

Por ejemplo, si usa yopara andamiar su nuevo proyecto web, viene preconfigurado para ver sus archivos MENOS / CSS / JS / HTML en busca de cambios y recompilar las partes necesarias de su proyecto cuando sea necesario. Simplemente ejecute grunt serve, y estará listo para codificar sin tener que preocuparse por compilar manualmente (MENOS / SASS / CoffeeScript) / minimizar / concatenar su código o actualizar su navegador manualmente como un hombre de las cavernas ...

Lèse majesté
fuente
1
No estoy seguro de qué versión estás usando. En la última versión 1.3.0 no hay función de reloj. Una solicitud de extracción para una función de reloj fue derribada hace 9 meses. github.com/cloudhead/less.js/pull/246
Gerard Roche
@BullfrogBlues: Lo siento, eso fue de la vieja lessc basada en Ruby.
Lèse majesté
Nota: "less-watch ha cambiado de nombre a fs-change. Úselo en su lugar:. npm install -g fs-change"
Andrew Lott
6

Hay varias opciones para compilar MENOS a CSS en el servidor, y la que elija probablemente dependerá de lo que use para el resto del sitio.

  • Si usa node.js, el lesscss original hará el trabajo.
  • Si usa PHP, lessphp . Tiene una API ligeramente basura cuando se trata de pasar variables desde PHP, pero hace el trabajo.
  • Si usa Ruby, SASS no es MENOS, pero es tan similar que cuando cambié de usar SASS (proyecto personal) a MENOS (un proyecto PHP en el trabajo) no noté ninguna diferencia aparte de la extensión del archivo. También tiene una útil biblioteca de mixins: COMPASS . No he intentado usarlos con MENOS, pero espero que funcionen. (Aparentemente, LESS era originalmente Ruby, por lo que probablemente haya un viejo compilador flotando por algún lado también)
  • Si usa ASP.Net, hay .less . No he usado este, así que no sé qué tan bien funciona.
  • Si usa Java, lesscss4j finaliza compilando con el entorno de secuencias de comandos Rhino incorporado LESS original y Java 6.
  • Si usa Perl, hay un módulo LESSp en CPAN.
Peter Taylor
fuente
2
No es un compilador de Ruby que viene con la antigua joya MENOS Rubí pero no se actualiza más así que muchas de las nuevas características que no se va a trabajar en él. Por lo tanto, si usa Ruby, recomendaría simplemente usar el lessccompilador binario que se basa en la última versión de less.js.
Lèse majesté
@ Lèsemajesté, simplemente iría con SASS, pero no quería ser acusado de ignorar deliberadamente la posibilidad de compilar MENOS en Ruby.
Peter Taylor
1
Sí, creo que SASS sería la mejor opción para Ruby ya que la gema MENOS ha quedado en desuso desde el cambio a JS.
Lèse majesté