16.11

Less.js dejará obsoleto al CSS

Código

El siguiente es un post que originalmente publicó Dmitry Fadeyev en su blog y que ha tenido a bien permitirnos la traducción y publicación en castellano. Mil gracias a Dmitry y a Alexis por este gran trabajo.

Si eres diseñador web puedes haber escuchado hablar –y estar interesado– de las herramientas de pre-procesado de CSS. Dos de estas grandes herramientas son LESS y SASS. Yo he ayudado a Alexis, el creador de LESS, con el diseño del lenguaje y el desarrollo de la web del proyecto.

LESS es una herramienta que quiero usar en mi trabajo y aunque SASS ya existía, no me apetecía usar una sintaxis diferente del CSS. Yo quería algo que mejorara el CSS y lo hiciera más poderoso mientras mantuviera el mismo look and feel. Eso es exactamente lo que hace LESS; extiende el CSS con variables, reglas anidadas, mixins (http://es.wikipedia.org/wiki/Mixin) y operaciones, por citar algunos ejemplos.

He aquí un ejemplo de código de LESS que puede dar nos una idea de su funcionamiento:

@brand-color: #3879BD;

.rounded(@radius: 3px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded(5px);
a {
color: @brand-color;
&:hover {
color: #000;
}
}
}

En este caso se usan tres características. Lo primero que he hecho es definir una variable al inicio llamada @brand-color y la utilizo para reusar este color en los enlaces. Luego creo una clase llamada .rounded que uso en el div #header; el encabezado entonces, tomará todas las propiedades de la clase rouded y usará 5px en lugar de 3. También puede verse el uso de reglas anidadas (nested rules), que facilitan mucho la organización del código. Para mayor información sobre LESS visita la web oficial del proyecto, http://lesscss.org.

LESS fue escrito originalmente para Ruby gem. No hay una razón especial por la que los desarrolladores usaron Ruby en lugar de cualquier otra herramienta, más que la consideración de que es un gran lenguaje y el formato gem es fácil de implementar en máquinas *nix (Linux y OS X), plataformas que son usadas por muchos desarrolladores. No es necesario usar Ruby o conocerlo para incorporar LESS en el prepocesado del código, solo hay que tenerlo instalado. Sin embargo, hay mucha gente que no está familiarizada con Ruby gems o no tiene idea de cómo usarlo. Afortunadamente LESS está disponible en versiones de otros lenguajes, incluyendo PHP y .NET.

Less.js

Próximamente veremos la evolución de LESS. El nuevo reto será mayor que cualquier implementación o actualización previa porque LESS será reimplementado en JavaScript. Esto significa que no se necesitará Ruby, ASP o PHP para usar LESS, solo hará falta un navegador.

Less.js es es la implementación de LESS en JavaScript que funciona en el navegador. Como cualquier script de JavaScript se agrega el enlace en la cabecera del código HTML y… ya está. LESS procesará el código LESS y en lugar de incluir un enlace al fichero CSS, se incluirá el enlace directamente en el código LESS. Sí, no hay pre-procesado de CSS, LESS lo manejará directamente.
¿Existe retraso en el procesado en directo? Realmente no. Dos razones para ello. La primera: Less.js ha sido reescrito completamente para un mejor rendimiento por lo que funcionará bien hasta en los navegadores con una pobre implementación de JavaScript (Less.js es unas 40 veces más rápido que la implementación de Ruby, suficiente para decir que es muy rápido). Dos: los navegadores más recientes que soportan HTML5 guardarán en caché el CSS generado por Less.js por lo que las páginas siguientes cargarán tan rápido como bueno sea el CSS.

Hay otras características destacables en Less.js. Un ejemplo de ellos es el uso de “watch”–disponible en el modo de desarrollo– que actualizará el CSS de una página con los cambios recientes independientemente de donde esté el fichero .less. Lo mejor de esto es no actualizará el código completo, solo los bits correspondientes a los cambios…en directo!

He usado Less.js en mi último rediseño de Workable que enviaré pronto a producción y ha sido una experiencia fantástica gracias a que todo lo anterior realmente funciona.

Un pequeño adelanto

Alexis no ha publicado Less.js oficialmente, pero…el repositorio está disponible en Github desde hace tiempo y se puede descragar la última versión para hacer pruebas, además con permiso de publicar en los blogs los comentarios sobre la experiencia. Creo que debería intentarse porque Less.js es gran desarrollo. He aquí el repositorio.

Hay que destacar que Less.js es una implementación de Node.js  que corre del lado del cliente, por loq ue la mayoría de los ficheros del repositorio serán irrelevantes al usarla a través del navegador. Lo que se necesita para probar Less,j es alguno de estos ficheros (el fichero min se ha reducido para optimizar el tamaño).

Probando

Aunque hay un repositorio en Github, también existe un Repositorio de Google Code del que se puede obtener el Script.  También puedes enlazar directamente a los servidores de Google y agregar la siguiente línea de código a tu fichero HTML:

<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js">
</script>

Ahora, para usar el código LESS, incluye el fichero .less como harías con un CSS pero cambiando la etiqueta rel=”stylesheet/less” para decirle al compilador que se trata de un fichero LESS.  Incluye la siguiente línea de JavaScript:

<link rel="stylesheet/less" href="/stylesheets/main.less"
type="text/css" />

Asegúrate de que el href=”/stylesheets/main.less” apunte a la ubicación del fichero .less y estará todo listo. Escribe tu código LESS y automáticamente se renderizará en tu navegador como si fuera CSS.

Nota: asegúrate de poner el include de LESS antes del de JavaScript . Deberían quedar de la siguiente manera:

<link rel="stylesheet/less" href="/stylesheets/main.less"
type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js">
</script>

Es necesario decir que el desarrollo de Less.js está en progreso y que esta es una versión temprana, lo que implica que puede encontrarse alguno que otro bug. Dicho esto, tengo que comentar que mi experiencia ha sido, con diferencia, muy, muy positiva sin ningún error de parsing. Sin embargo, si el compilador tuviera algún problema, se mostrará un mensaje informativo en el navegador indicando la ubicación específica del problema en el código.

P.D. Para usar la opción “watch”, que actualiza el CSS cuando los cambios del fichero LESS son guardados, solo hay que agregar el siguiente código en la plantilla:

<script type="text/javascript" charset="utf-8">
     less.env = "development";
     less.watch();
</script>

Puede que no sea necesario la línea “development” porque el script debe detectar cuando se trabaja en local, pero en mi caso no funcionó, así que lo ajusté manualmente. Otro método para llamar el “watch” es agregar “#!watch” en final de la URL.

P.D. Actualmente, los scripts de Less.js no funcionan en Chrome si la ruta de la página comienza por “file:///”, lo cual es un problema conocido de Chrome.

//

Versión en Castellano por Pedro Carrillo

, , , , ,

@pedrocarrillo es Pedro Carrillo

entradas | twitter | web
escribir leer personas artes poesía música fingidor y liante

27 respuestas a Less.js dejará obsoleto al CSS

  1. Pingback: Visual Studio: Less y CSS dinámicos | Jersson on the block!

  2. jorge dice:

    ¡Excelente post! Muchas gracias.

  3. Un post muy trabajado, Pedro!
    Estaba ahora mismo construyendo una nueva web, y he empezado a informarme sobre less, si es mejor o peor que SASS, y lo que más me tiraba para atrás de LESS es que al ser client-side, pensaba que frenaría mucho la carga de la web. Si, como dices en el post, no ralentiza nada o casi nada la carga, creo que me basaré en LESS para darle estilo a la web, puesto que el código es súper sencillo y hacen falta pocos conocimientos más allá del CSS para entenderlo y usarlo bien.

    Un saludo, y enhorabuena por tu trabajo.

    • Hola Pablo, muchas gracias!

      LESS y SASS comparten mucho de la filosofía de preprocesado del CSS. De hecho, una gran herramienta de trabajo es CodeKit (OSX), que lo puedes encontrar en http://incident57.com/codekit/ sin duda una de las mejores aplicaciones para el trabajo web. La ventaja de usarla es que puede compilar el LESS o el SASS y generar directamente el CSS en desarrollo y luego sólo se sube a producción. Suerte

  4. fernando araya dice:

    Muy interesante lo que propone less, en cierta forma podrás programar el css, excelente , estaré al pendiente de su evolución.
    Felicitaciones a ti Pedro por tu aporte al internet.

  5. Israel li dice:

    Excelente información y post, saludos.

  6. Interesante el asunto de less, creo que lo probaré, me convenció tu opst, de hecho le huía a less, pero veo que tiene mucha ventaja, será probarlo en local, cuando este listo, me tendré que enterar pa’ ponerlo en production.

    Gracias mano, esta bastante “arrecha la joda” (Expresión Colombiana, diciendo, “que bueno el asunto”)

    • jajaja gracias por el aporte lingüístico siempre es bueno aprender expresiones nuevas :D

      La idea de usar preprocesado del CSS es la de optimizar el trabajo y no repetirnos, no le des largas :)

  7. zupulido dice:

    Hola,

    Entiendo que aún está en desarrollo, pero ¿es posible conseguir la semántica de Less en español, para lo que va hasta el momento?

    • Hola. No conozco ningún proyectod e traducción de la documentación de LESS en Castellano hasta el momento –igual hay alguno por ahí–, sin embargo, el inglés que utilizan en http://lesscss.org/ es muy sencillo y no debes tener problea con ello. En cualquier caso, es recomendable que nos manejemos en Inglés que es la lengua general para cosas técnicas. Si has manejado lenguajes de programación no tendrás ninguna dificultad, seguro. ¡Ánimo y suerte!

  8. Diego Alvarez dice:

    Buenas tardes
    El autor original del post actualizo su post, en el cual dice que si usted es nuevo en LESS el recomienda usar un compilador para cambiar los acrhivos .less en archivos .css. Es decir que los scripts de Less.js no funcionan ? Lo intente con IE9 y Firefox 11 sin resultados positivos.

    • Hola Diego. LESS puede ser usado directamente en el navegador sin compilar, de eso se ocuparía el intérprete que es lo que se enlaza en la web, esa era la manera inicial de usarlo y si se configura bien puede funcionar perfectamente.

      Lo que leíste es cierto, en el desarrollo es más cómodo y recomendable usar un compilador que te permitirá optimizar el tiempo de trabaj, evitar errores de sintaxis y ahorrarte dolores de cabeza. Como compilador te recomiendo http://incident57.com/codekit/ (OSX).

      Suerte

  9. Hj dice:

    Hermano esto es excelente, pero tengo una inquietud, se pueden crear variables en LESS y pasar valores con javascript?

  10. Pingback: Algo sobre esto y aquello » Blog Archive » SASS, extiende tus CSS’s

  11. ALAN DIAZ dice:

    Hola, que bueno encontrar este artículo traducido al español, estoy usando bootstrap y he encontrado el preprocesador less, pero hay algo que me inquieta cuando cargo el script less.js, se va a cargar todo el script o solo las partes que yo uso en el archivo .less. Me preocupa esto por la demora en la carga que puede existir para iniciar la web. Por eso preguntaba, se va a cargar todo el script less.js? si es así hay alguna forma de cargar solo que uso o usaré? Qué me dice de la solución de escribir en .less y convertirlo a css, es lo mismo?
    Espero su gentil respuesta, muchas gracias!

  12. Yises dice:

    Muchas gracias por el artículo, me ha abierto los ojos a una forma mucho más sencilla y rápida de programar css.
    Aun así, creo que tanto como dejar obsoleto al css…. ;) Digamos que tener que procesar el fichero less o el js cada vez puede llegar a ser poco ligero. Es mejor procesar ya y transformarlo en css con alguna herramienta (he comenzado a utilizar el SimpleLESS)
    Pero lo dicho, muchas gracias!!!

  13. felipe Ostos dice:

    Gracias Buen aporte =)

  14. ivan dice:

    Un gran post. La verdad es que desde que uno conoce LESS no puedes evitar usarlo. Es sencillo y multiplica nuestra productividad gestionando hojas de estilo. Existen muchos compiladores de LESS para diversas plataformas que nos permiten convertir nuestras hojas de estilo LESS en css y evitar el procesado en el lado del cliente. Una opción muy interesante.

  15. Maly Rivas dice:

    Hola Pedro me ha gustado mucho tu post, estoy desarrollando una aplicación y mi pregunta para ti en esta ocación es: ¿Necesito el .js para poder ejecutar los estilos?.

  16. Hola, estoy probando less y la verdad me ha gustado bastante.
    Solo que lo he probado en IE y no logro hacerlo funcionar.

    El error que muestra es “SyntaxError: El objeto no acepta esta propiedad o método”. Entiendo que es un problema del javascript que trae IE pero antes de seguir intentando encontrar una solución personal, quisiera saber si existe una solución oficial al problema, un less.js con compatibilidad para IE.

    Me sería muy util utilizarlo en mi proyecto por lo cual agradezco cualquier ayuda.

    Saludos.

    • Rahul dice:

      Използвал съм таблица за оформлението на калкулатора. Част от секциите съм ги направил с div-ове, но ако се бях сетил навреме щях да използвам семантичните тагове от HTML5, като например: section. Result H [CSS] Домашно CSS Presentation – 04 Calculator #plamen { yhecovv’s: blog; } | #plamen { yhecovv’s: blog; }

  17. Samuels (Eminem) “Nothin’ On You” — Philip Lawrence, Ari Levine, Bruno
    Mars & Bobby Simmons Jr. Have you played any gigs around town, any house parties, any school dances.
    On the Early days of the Peak Downs Field from “The Peak Downs Telegraph”.

  18. Hi there friends, fastidious piece of writing and pleasant arguments
    conmented here, I am genuinely enjoying by these.

    My homepage; you tube download

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>