Sass y Less: el futuro de la web

Martes, julio 3rd, 2012

Se que también te ha pasado lo siguiente: tienes un CSS de más de 800 líneas y realmente se vuelve un desastre total mantenerlo. Logras tener líneas que se ven como:

body#about div#content p.info span.important { …

Así hemos hecho los CSS desde hace mucho, el detalle está en que escribir tanto por un CSS puede lograr ser fastidioso, propenso a errores y ahora con CSS3 y tantas cosas lindas que se pueden hacer con las bondades del CSS3 y de paso le agregamos un par de motores de renderizado diferente que incorporaron estas características desde antes que se volviera un estándar (-moz-border-radius/-webkit-border-radius -> border-radius) y tenemos que soportarlos. Al final: más código para hacer algo que en teoría es simple.

Todo esto se volvería un desorden absoluto, con líneas y archivos enormes, código notablemente repetido y cuando tenemos que hacer modificaciones muchas veces nos perdemos.

Aquí es donde interviene Sass (Syntactically Awesome Stylesheets) y Less. Las dos logran lo mismo: hacer que escribir CSS sea divertido (nuevamente). Sass tiene su propia sintaxis, aún cuando en Sass 3 permite la misma sintaxis de SCSS (que es más bien un CSS tabular). Less, por su parte, tiene una sintaxis muy parecida al SCSS, con algunas diferencias. Si vienes de CSS te parece más natural todo usar SCSS con Sass o simplemente irte con Less.

Dentro de los últimos 6 meses pude hacer proyectos Sass y Less y en conclusión les puedo decir que si hoy siguen haciendo el CSS de la misma manera ESTÁS PERDIENDO TU TIEMPO y debes obligatoriamente echarle un ojo a estas tecnologías.

Sass

Si haces Ruby on Rails ya debes saber que es Sass. Sass es una extensión de CSS3 que permite escribir CSS anidado, con una sintaxis mucho más cómoda y sencilla que la de CSS convencional.

Igualmente posee las siguientes características:

  1. Se compila a CSS ordinario usando ya sea una herramienta por línea de comandos o alguna herramienta de escritorio como CodeKit (Mac). Yo usé un script en Ruby en la línea de comandos que dejaba corriendo siempre.
  2. Posee variables, así si tienes un mismo valor (un color, un tamaño o varios tamaños, etc) puedes grabarlo en una variable y reutilizarlo.
  3. Permite tener una sintaxis anidada (como cualquier lenguaje de programación) de dos tipos: al estilo Sass donde no hay llaves ({) y los espacios son importantes o al estilo SCSS donde si hay llaves y es anidado. así si tienes un elemento que está contenido dentro de unas llaves quiere decir que es el hijo del otro elemento.
  4. Mixins: piensen en funciones que están para evitar la repetición de código.
  5. Gran cantidad de funciones por defecto. También permiten operaciones matemáticas básicas (pore ejemplo para agrandar tamaño de letras.
  6. Compass: Un pequeño framework para hacer el trabajo con Sass menos repetitivo. Ya tiene mixins, variables y demás elementos que te hará la vida feliz.

Veamos un ejemplo de Sass:

/* Sass con sintaxis .sass */
/* Variables */
$azul: #3bbfce /* Guardamos una variable llamada azul con el color #3bbfce */
$blanco: #fff
/* este es un elemento con class content-navigation */
.content-navigation
  border-color: $blue /* Noten el espacio y la falta de llaves */
  color: darken($blue, 9%) /* darken es una funcion utilitaria que viene en Sass, hace un color mas oscuro */
  p
    color: $blanco
view raw sass.sass This Gist brought to you by GitHub.
/* Sass con sintaxis .scss */
$blue: #3bbfce;
$blanco: #fff;
/* Notar que en esta ocasion si tenemos las llaves y los ; */
.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
  p {
    color:$blanco;
  }
}
view raw scss.sass This Gist brought to you by GitHub.

Less

Less es muy parecido a Sass, con el único hecho que necesita (no obligatoriamente) un Script en JavaScript para su interpretación de Less a CSS común. Lo que si cabe destacar es que hay herramientas como Less.app (Mac) y algunas en la línea de comando que transforman Less a CSS directamente.

Las características son muy parecidas a Sass y ofrecen lo mismo que Sass, además de:

  1. Pueden correr en el servidor con Node.js o Rhino. Muy útil si utilizas Node.js en el server para alguna aplicación móvil o algo.
  2. No necesitas un compilador a CSS si no quieres. Puedes utilizar su interpretador en JavaScript.
  3. Tiene mixins, variables, operaciones matemáticas y funciones básicas, igual que Sass.
  4. Parametric Mixins: Esto está bueno. En español sencillo son funciones que pueden representar clases de CSS o funciones directamente. Así tenemos un mixin que se llama “.border-radius” quiere decir que los elementos pueden tener class=”border-radius” y utilizarán los parámetros establecidos o dentro de nuestro código ligeramente podríamos hacer { .border-radius() } y el ejecutaría en vez de una clase un mixin. Leer más.
  5. Less no tiene Compass, pero hay una alternativa muy buena llamada Preboot, utilizada como base del Bootstrap de Twitter.
  6. Comentarios con //.

En conclusión les puedo decir que ya yo escogí Less sobre Sass, por varias razones pero básicamente es que me he acostumbrado mucho a utilizar Less.app, me encantan los Parametric Mixins y prefiero Preboot sobre Compass.

Si tu eres un front end developer o un designer y utilizas CSS a diario y aún no estás utilizando ni Sass ni Less realmente te exhorto a que hoy mismo escojas uno y lo utilices de ahora en adelante en proyectos donde escribas más de 50 líneas de CSS. Me lo vas a agradecer.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: