LESS vs Sass vs Stylus

-

El primer preprocesador que usé fue LESS. Lo elegí porque la documentación tiene ejemplos fáciles de entender y rápidamente las ventajas de los pre-procesadores de CSS me convencieron de que son una potente herramienta de desarrollo front-end. Empecé a investigar sobre lasintaxis de Less, Sass y Stylus. Usé Stylus en un proyecto web y luego Sass. ¿Cuál es mejor?

Características de LESS

LESS es un pre-procesador que se mantiene fiel a la naturaleza declarativa de CSS. Te da algunas herramientas para que el CSS te resulte más fácil de mantener, pero no intenta ser un lenguaje de programación1.
La documentación es concisa y los ejemplos muy claros.
Podés aprender e inclusive dominar LESS en muy poco tiempo. No tiene mucho misterio, leyendo la documentación alcanza y sobra.
Aunque no es recomendable para producción, podés empezar a usarlo en segundos simplemente linkeando un JavaScript, sin necesidad de instalar absolutamente nada.
Framework front-end: Bootsrap. Bootstrap es un framework front-end popular y aunque no tenés que saber LESS para usar Bootstrap, sirve como ejemplo de lo que podés lograr con LESS.

Motivos para NO elegir LESS

Si sabés CSS, y querés mejorar tu flujo de trabajo sin hacer cambios radicales, es una opción viable. Generalmente se recomienda LESS para principiantes y para diseñadores, pero no vas a ser un principiante para siempre y que alguien sea diseñador, no significa que es incapaz de entender conceptos sencillos de programación.

Uno de los grandes problemas de LESS es que desarrollás más rápido con los mixins a expensas del rendimiento. Cada vez que usás un mixin, LESS repite bloques de código en el CSS generado. Sass con la directiva @extend agrupa los selectores que necesitan el mismo código y genera un CSS optimizado2. En una futura versión, LESS va a extender mixins. Otros pedidos ya decidieron que no los necesitan y otros aún los están discutiendo3. Viendo la lista de feature requests de LESS en GitHub, se nota un interés de los usuarios por equiparar a LESS en cuanto a funcionalidades con los otros pre-procesadores.

Características de Stylus

La documentación es completa y con ejemplos claros, pero no tan prácticos como los de LESS.
Podés probar Stylus online.
Los mixins transparentes te permiten re-definir propiedades. Es un pre-procesador para hackers.
CSS Authoring Framework: Nib es una pequeña librería con mixins CSS3 cross-browser, etc.
Framework front-end: Jeet Framework es un framework inspirado en el sistema de grilla Semantic.gs, que usa un pre-procesador de CSS para evitar incluir clases presentacionales en el HTML. Conceptualmente es lo opuesto a Bootstrap.
Motivos para NO elegir Stylus

Lamentablemente además de la documentación no hay prácticamente tutoriales o artículos detallando casos de uso. A Stylus le falta un campeón, una persona importante en la industria que escriba sobre sus beneficios y le de impulso. Con LESS y Sass maduros, Stylus llegó tarde al juego y no despegó.
Características de Sass
La referencia del lenguaje es extensa.
Podés probar Sass online
Para aprender Sass, hay un curso en Code School Assembling Sass con videos y ejercicios para practicar el código en el navegador.
CSS Authoring Framework: Compass incluye patrones re-utilizables, mixins CSS3 cross-browser y facilita la creación de sprites. Bourbon es una librería de mixins para Sass.
Frameworks front-end: Foundation.
Motivos para elegir Sass

Sass es, sin lugar a dudas, más complejo que LESS, pero tiene la comunidad que le falta a Stylus. Hay cursos en CodeSchool y artículos publicados en CSS-Tricks, The Sass Way y otros blogs para aprender Sass y mantenerse al día.

Comentarios

Publicar un comentario

Entradas populares de este blog

Instalar Ruby on Rails en Ubuntu 13.04

-
Los pasos a seguir son los siguientes: 1. Actualizar repositorios de paquetes: sudo apt-get update 2. Instalar  Git . Git es un sofware de control de versiones: sudo apt-get install git 3. Instalación de  Curl . Curl es una herramienta de línea de comandos para automatizar transferencias de archivos con sintaxis url: sudo apt-get install curl 4. Antes de instalar Ruby, es necesario instalar  Ruby Version Manager , que nos permite tener diferentes versiones de Ruby instaladas: curl -L get.rvm.io | bash -s stable Es necesario que RVM se ejecute como una función en la shell. Primero verificamos si ya es así: type rvm | head -1 Todo irá correcto si la salida es: rvm: es una función En caso contrario, hay que editar el fichero ~/.bashrc y añadirle la siguiente linea: [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function* Y se recarga la shell: source ~/.bashrc 5. Instalación de depende...
Leer más

Instalar Ruby on Rails en Ubuntu 13.04

-
Imagen
Bien esto es lo que tienes que hacer: primero que todo habre la terminal de Ubuntu sudo apt-get update sudo apt-get install curl \curl -L https://get.rvm.io | bash -s stable source ~/.rvm/scripts/rvm rvm requirements Dependencias Adicionales para Ruby apt-get --no-install-recommends install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev libgdbm-dev ncurses-dev automake libtool bison subversion pkg-config libffi-dev si surge algun problema el anterior grupo de dependencias entonces pruebas con este... sudo apt-get --no-install-recommends install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev libgdbm-dev ncurses-dev automake libtool bison subversion pkg-config libffi-dev Instalamos Ruby rvm install 1.9.3 u...
Leer más

¿Cómo ver sqlite3 en interfaz gráfica rápidamente?

-
Si estás en Ubuntu 12.10 y quieres usar sqlite3 para la gestión de bases de datos debes hacer lo siguiente: Ejecutar un terminal y primero escribir: sudo apt-get install sqlite3 Después de esto, si queremos manejar sqlite3 desde la interfaz gráfica, debemos escribir lo siguiente en la terminal sudo apt-get install sqlitebrowser Y listo! ya podremos ejecutar SQLite Database en interfaz gráfica! Artículos relacionados:
Leer más