Preprocesadores de CSS: Sass, LESS y Stylus
730 views
Skip to first unread message
Santiago Martín-Cleto
Mar 15, 2012, 4:33:58 AM3/15/12
to Frontend Spain
Hola a todos,
En mi empresa estamos valorando la posibilidad de implementar un
preprocesador de CSS en aras de una mayor agilidad en el desarrollo y
una mantenibilidad más eficiente. Los proyectos son sites grandes, con
un alto volumen de tráfico y donde el performance importa bastante.
Son además sites muy susceptibles a cambios continuos, por lo que la
escalabilidad también es un factor a tener en cuenta.
De los más difundidos hemos descartado a priori LESS por el hecho de
que implica incluir una librería JS, no queremos cargar a un más el
lado cliente en nuestros proyectos (usamos entre otros @font-face,
multitud de APIs de terceros, scripts de publicidad...)
Pese a que contamos con experiencia previa con LESS, estamos valorando
Sass o Stylus. ¿Habéis utilizado alguno de ellos en sites grandes?
Según vuestra experiencia ¿los recomendáis para estos casos?
Os dejo de paso un artículo bastante majo de NetTuts donde se hace una
comparativa entre los tres sistemas:
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
En mi empresa estamos valorando la posibilidad de implementar un
preprocesador de CSS en aras de una mayor agilidad en el desarrollo y
una mantenibilidad más eficiente. Los proyectos son sites grandes, con
un alto volumen de tráfico y donde el performance importa bastante.
Son además sites muy susceptibles a cambios continuos, por lo que la
escalabilidad también es un factor a tener en cuenta.
De los más difundidos hemos descartado a priori LESS por el hecho de
que implica incluir una librería JS, no queremos cargar a un más el
lado cliente en nuestros proyectos (usamos entre otros @font-face,
multitud de APIs de terceros, scripts de publicidad...)
Pese a que contamos con experiencia previa con LESS, estamos valorando
Sass o Stylus. ¿Habéis utilizado alguno de ellos en sites grandes?
Según vuestra experiencia ¿los recomendáis para estos casos?
Os dejo de paso un artículo bastante majo de NetTuts donde se hace una
comparativa entre los tres sistemas:
http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
Nahuel Sotelo
Mar 15, 2012, 4:44:48 AM3/15/12
to fronten...@googlegroups.com
Justo me pillas instalando SimpLESS, una app para compilar LESS en local antes de subirlo sin tener que incluir una libreria JS.
http://wearekiss.com/simpless
También tienes LESS app, que me gusta más, pero solo corre en Snow Leopard para arriba:
http://incident57.com/less/
Ambas tienen tambien opcion para sacar el codigo minimizado y compilan automaticamente cada vez que guardas el archivo por lo que no agregan complejidad al proceso de trabajo. Si estás en Windows o Linux, SimpLESS tambien tiene version compatible.
De todas formas, ojo con LESS, es cierto que aumenta la eficiencia en el desarrollo pero si no se usa con cuidado se puede cargar la performance del codigo.
http://wearekiss.com/simpless
También tienes LESS app, que me gusta más, pero solo corre en Snow Leopard para arriba:
http://incident57.com/less/
Ambas tienen tambien opcion para sacar el codigo minimizado y compilan automaticamente cada vez que guardas el archivo por lo que no agregan complejidad al proceso de trabajo. Si estás en Windows o Linux, SimpLESS tambien tiene version compatible.
De todas formas, ojo con LESS, es cierto que aumenta la eficiencia en el desarrollo pero si no se usa con cuidado se puede cargar la performance del codigo.
--
Nahuel Sotelo
--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a fronten...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spai...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.
Harold Dennison
Mar 15, 2012, 5:07:44 AM3/15/12
to fronten...@googlegroups.com
Efectivamente, como comenta Nahuel puedes compilar LESS en local y subir a producción un CSS normal y corriente.
Otra de las cosas con las que coincido plenamente es con "si no se usa con cuidado se puede cargar la performance del codigo. "
Los preprocesadores de CSS son un arma de doble filo: escribimos mucho menos código, pero o sabemos muy bien que estamos haciendo, o acabamos teniendo mucho más código en el archivo final (por lo tanto peor rendimiento / velocidad )
Jorge del Casar
Mar 15, 2012, 5:10:47 AM3/15/12
to fronten...@googlegroups.com
Hola Santiago,
Lo primero aclararte que Less puedes preprocesarlo y evitar la inclusión del javascript que lo preprocesa en cliente. Existen varias formas para obtener el css final, el cual subirías a producción. Además varios de estos procesos te incluyen la opción de generar la versión minify. En el proyecto de Twitter Bootstrap explican bastante bien el proceso de compilado de Less.
En cuanto al uso de estos sistemas el problema reside en la integración con el entorno de trabajo. Considero que el procesamiento de estos ficheros debería de hacerse automáticamente en servidor y que el frontend no tenga que estar pendiente de la generación de los mismo. En local puedes usar herramientas como SimpleLess, que te procesa el less y luego tienes 2 opciones o tener que subir esa carpeta de css procesados o hacer un ignore en el control de versiones y mediante los hooks se generen las versiones procesadas una vez subido el código.
Un saludo,
Raúl Martín
Mar 15, 2012, 4:46:45 AM3/15/12
to fronten...@googlegroups.com
Hola Santiago
Recuerda que en less puedes dejar el fichero ya procesado en tus servidores.
Es decir no es necesario el uso de less.js Incluso te facilita la
salida comprimida.
2012/3/15 Santiago Martín-Cleto <marti...@gmail.com>:
Santiago Martín-Cleto
Mar 15, 2012, 7:40:32 AM3/15/12
to Frontend Spain
Muchas gracias a todos por vuestros comentarios.
Que LESS se pueda precompilar en local anula su desventaja inicial de
depender de una librería JS, desde luego. Aún así y por las pruebas
que hemos podido hacer nos da la impresión de que Sass genera un
código final más fino que LESS. En cuanto al desarrollo ambos son
bastante similares y satisfacen en general las necesidades que
tenemos, lo que nos preocupa desde luego es que no perjudique el
perfomance de nuestros sites.
A todo esto... ¿Alguien ha usado Stylus? Yo ni siquiera lo conocía
hasta haber leído la reseña de NetTuts a la que me refería antes...
Que LESS se pueda precompilar en local anula su desventaja inicial de
depender de una librería JS, desde luego. Aún así y por las pruebas
que hemos podido hacer nos da la impresión de que Sass genera un
código final más fino que LESS. En cuanto al desarrollo ambos son
bastante similares y satisfacen en general las necesidades que
tenemos, lo que nos preocupa desde luego es que no perjudique el
perfomance de nuestros sites.
A todo esto... ¿Alguien ha usado Stylus? Yo ni siquiera lo conocía
hasta haber leído la reseña de NetTuts a la que me refería antes...
Bruno
Apr 2, 2012, 6:45:25 AM4/2/12
to fronten...@googlegroups.com
Hola,
Llevo trabajando con LESS bastante tiempo y he aprendido una cosa muy importante: "Is about the workflow!"
Utilizar LESS os compensará en tiempo, recursos y resultado final.
Olvídate por un momento de todo lo demás. Tengo que claro que el algoritmo de conversión irá mejorando poco a poco.
Por otra parte la comunidad ya ha creado compiladores para casi cualquier lenguaje o CMS.
Y si añades al flujo de trabajo un super framework (ejemplo: Bootstrap), los tiempos de desarrollo se minimizan considerablemente para todos los integrantes del proyecto: maquetadores, programadores, UX, diseñadores gráficos.
Por si te interesa, tengo un par de artículos al respecto:
Llevo trabajando con LESS bastante tiempo y he aprendido una cosa muy importante: "Is about the workflow!"
Utilizar LESS os compensará en tiempo, recursos y resultado final.
Olvídate por un momento de todo lo demás. Tengo que claro que el algoritmo de conversión irá mejorando poco a poco.
Por otra parte la comunidad ya ha creado compiladores para casi cualquier lenguaje o CMS.
Y si añades al flujo de trabajo un super framework (ejemplo: Bootstrap), los tiempos de desarrollo se minimizan considerablemente para todos los integrantes del proyecto: maquetadores, programadores, UX, diseñadores gráficos.
Por si te interesa, tengo un par de artículos al respecto:
Un saludo
Oriol Torras
May 16, 2012, 4:19:05 PM5/16/12
to fronten...@googlegroups.com
Nadie ha probado en un proyecto complejo Sass o stylus? a priori, por lo poco que he podido ver, stylus me parece más versátil, aparte de integrarse perfectamente en nodejs. O me equivoco? Por mi parte empezaré a usar stylus en un pet project y ya os contaré mis impresiones.
Vamos a ver si animamos esto un poco, que parece que el trabajo no nos deja tiempo parala lista :P
Gracias y saludos,
--
Has recibido este mensaje porque estás suscrito al grupo "Frontend Spain" de Grupos de Google.
Para ver este debate en la Web, visita https://groups.google.com/d/msg/frontend-spain/-/RGSPIB3jmr8J.
Para publicar una entrada en este grupo, envía un correo electrónico a fronten...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a frontend-spai...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/frontend-spain?hl=es.
Neftalí Guerrero (Nesta)
May 16, 2012, 8:27:18 PM5/16/12
to fronten...@googlegroups.com
Nosotros en Emergya en la mayoría de proyectos utilizamos un Theme con el core directamente en sass y hasta el final todo con sass y compilando, y déjame decirte que uff cada día lo flipo más :)
stylus no lo he probado.
Un saludo!!!
Neftalí Guerrero Pancorbo (Nesta)
Área de Proyectos
Emergya Consultoría
Tfno: +34 954 51 75 77
Fax: +34 954 51 64 73
Jorge del Casar
May 17, 2012, 2:53:10 AM5/17/12
to fronten...@googlegroups.com
Gonzalo Ruiz de Villa
May 17, 2012, 2:59:09 AM5/17/12
to fronten...@googlegroups.com
Nosotros estamos usando SASS (Compass) en un proyecto MUY grande y con MUCHA gente en el que además hay maquetación con "em" para mantener la capacidad de zoom en viejos amigos nuestros (IE).
Sin SASS hubiese sido un auténtico infierno. Me pongo malo de pensar como hacerlo a la antigua usanza tirando CSS directamente.
2012/5/17 Neftalí Guerrero (Nesta) <ngue...@emergya.es>
Nesta Guerrero
May 17, 2012, 3:02:39 AM5/17/12
to fronten...@googlegroups.com
Gonzalo tu y yo nos llevaremos muy bien xD.
+10000 a todo lo que comentas jejeejej aqui igual :)
Ivan Pla
May 17, 2012, 3:29:56 AM5/17/12
to fronten...@googlegroups.com
Aprovecho: ¿Alguien ha empezado algun ptoyecto con bootstrap? ¿Lo aconsejáis?
Daniel Lúcia García
May 17, 2012, 3:30:42 AM5/17/12
to fronten...@googlegroups.com
Esa pregunta me interesa :) o mejor dicho, la respuesta
Oriol Torras
May 17, 2012, 3:33:29 AM5/17/12
to fronten...@googlegroups.com
Bootstrap es un framework de JavaScript, sería mejor mantener este hilo estrictamente para preprocesadores CSS y abrir uno nuevo sobre Bootstrap, lo digo por mantener un orden y coherencia.
Saludos,
Ivan Pla
May 17, 2012, 3:52:01 AM5/17/12
to fronten...@googlegroups.com
Pero con bootstrap partes de una base de css. Reformulo la pregunta: ¿Qué ventajas/inconvenientes veis a partir de 0 un proyecto con bootstrap o con compass?
Jorge del Casar
May 17, 2012, 4:02:24 AM5/17/12
to fronten...@googlegroups.com
Hablando de Bootstrap como Framework css preprocesado diría que una mejor solución es coger las buenas ideas e incorporarlas en tu proyecto. Yo lo he dejado pelado porque muchas cosas no las uso. Además al sobre escribir las propiedades por defecto engordas el css y para evitarlo terminas tocando los ficheros del framework y por tanto impides futuras actualizaciones.
Por lo que yo te aconsejaría usar LESS y te crees tu estructura de ficheros y cojas algunos less de Bootstrap como por ejemplo variables.less, mixins.less y grid.less, como básicos. Si tienes menús horizontales, las opciones que ofrece nav.less y navbar.less son bastante interesantes si las combinas con scrollspy.js. Luego si utilizas algún JS u otra funcionalidad pues analiza incluira :D
También depende de lo parecido que sea tu diseño a Bootstrap.
Saludos,
Ivan Pla
May 17, 2012, 4:20:12 AM5/17/12
to fronten...@googlegroups.com
Gracias Jorge. Eso quería yo saber.
Atentamente,
Ivan Pla.
Rafael García Lepper
May 17, 2012, 4:35:00 AM5/17/12
to fronten...@googlegroups.com
Hola,
parece que Chris Coyier lo deja muy claro, Sass es mejor que Less y con codekit parece que ya no hace falta meterse en líos con el servidor con RoR para compilar scss. Yo en principio estoy de acuerdo con Jorge; Bootstrap y otros frameworks tienen normalmente demasiado porque están hechos para cubrir un montón de posibilidades. Yo solo uso forms.less para normalizar formularios en todos los navegadores que es un dolor, pero para grids me gusta mucho más la idea de semantic.gs que usa mixins para crear el grid.
En cualquier caso, parece que la cuestión ya no es si usar un preprocesador o no, si no cual. A mi de momento la extrema modularidad que permiten proyectos con less o sass me ralentiza, sobre todo porque me había acostumbrado a editar en firebug la linea que necesitaba tocar y al quedarme contento mirar el número de línea y editarlo en el archivo .css. esto ya no lo puedo hacer y me quema la verdad.
Os agradecería a los que tenéis más experiencia con preprocesadores que compartierais vuestro workflow.
Saludos
Rafael G. Lepper
Front End Web Developer
http://www.thehandcoder.com
@rglepper
parece que Chris Coyier lo deja muy claro, Sass es mejor que Less y con codekit parece que ya no hace falta meterse en líos con el servidor con RoR para compilar scss. Yo en principio estoy de acuerdo con Jorge; Bootstrap y otros frameworks tienen normalmente demasiado porque están hechos para cubrir un montón de posibilidades. Yo solo uso forms.less para normalizar formularios en todos los navegadores que es un dolor, pero para grids me gusta mucho más la idea de semantic.gs que usa mixins para crear el grid.
En cualquier caso, parece que la cuestión ya no es si usar un preprocesador o no, si no cual. A mi de momento la extrema modularidad que permiten proyectos con less o sass me ralentiza, sobre todo porque me había acostumbrado a editar en firebug la linea que necesitaba tocar y al quedarme contento mirar el número de línea y editarlo en el archivo .css. esto ya no lo puedo hacer y me quema la verdad.
Os agradecería a los que tenéis más experiencia con preprocesadores que compartierais vuestro workflow.
Saludos
Rafael G. Lepper
Front End Web Developer
http://www.thehandcoder.com
@rglepper
Xavi Blanch
May 17, 2012, 8:16:48 AM5/17/12
to fronten...@googlegroups.com
Hola,
El compilador de sass, en Rails y en entorno de desarrollo, devuelve el numero de línea del fichero no compilado como comentario antes de cada grupo de selectores.
En cualquier caso, llega un punto en el que si el código es lo bastante semántico y tenemos las hojas de estilo bien separadas el bache de buscar la línea que devuelve el inspector de código es mucho más bajo y el ahorro de tiempo (tanto en desarrollo como en mantenimiento) que significa usar un compilador compensa la pequeña pérdida que podría suponer no ver la línea exacta.
Frameworks si/no... me uno al depende incluso más que a usar partes de determinadas librerías por proyecto.
Hay generadores de grids ahí fuera (gridsystemgenerator.com, por ejemplo) donde podemos generar en un par de clicks grids adaptados a la la fantasías de los diseñadores que no han abandonado el pixel perfect.
A veces con nada, otras con un reset o un normalize y un formalize es suficiente y otras veces merece mas la pena tirar de bootstraps.
La idea al final es ahorrar tiempo, así que creo que esta bien tomarse un rato para hacer un par de pruebas y evaluar que conviene más en cada caso y no casarse con nada.
Un abrazo!
Xavi
Reply all
Reply to author
Forward
0 new messages