Sass & Less

Cuando llevas un cierto tiempo editando CSS te das cuenta de una cosa: hay código que repites mucho, especialmente si usas algún tipo de framework. Tarde o temprano te dices: «Sería genial poder automatizar el código, que dando una simple orden se insertara ese código repetitivo»… Bueno, en resumen, en eso consisten SASS y LESS.

SASS y LESS son preprocesadores de CSS que añaden nuevas funcionalidades al lenguaje CSS (variables, funciones, condicionales…). Lo mejor de todo es que generan código CSS completamente normal, por lo que ni tú ni tus usuarios tendréis que hacer nada para que tus webs funcionen. Tampoco tendrás que pasarte meses estudiando documentación, ya que su funcionamiento es muy fácil. Veamos qué posibilidades nos ofrecen y en qué se diferencian.

Funcionalidad básica de SASS y LESS

¿Qué se necesita para escribir CSS en SASS/LESS? Saber CSS. Parece una broma, pero no lo es: si escribes CSS normal y corriente, funcionará (de ahí lo de no tener que estudiar mucha documentación).

Nota: En el resto del artículo, para abreviar, me referiré a SASS únicamente. Es el que uso más (más adelante explicaré por qué) y, salvo que indique lo contrario, lo que aquí explico se puede aplicar a ambos indistintamente.

Si escribes este código en SASS/LESS:

article {
    width: 50%;
    color: red;
}

El código resultante al compilar (más adelante lo explico) sería el mismo. El problema es que eso no es muy útil, ¿verdad? 😛

Anidación (nesting)

La cosa empieza a ponerse interesante cuando queremos usar selectores anidados, por ejemplo:

/* CSS */
article {
    color: red;
}
article p {
   color: blue;
}
article p a {
   color: white;
}
article p a:hover {
   color: yellow;
}

Resulta cansino tener que repetir article una y otra vez, ¿cierto? Con SASS/LESS no hace falta:

/* SASS */
article {
    color: red;
    p {
        color: blue;
        a {
            color: white;
            &:hover {
                color: yellow;
            }
        }
    }
}

Fíjate en cómo los selectores se anidan unos dentro de otros, esto indica al preprocesador que un selector es hijo del anterior. El resultado final sería este:

/* CSS */
article {
    color: red;
}
article p {
   color: blue;
}
article p a {
   color: white;
}
article p a:hover {
   color: yellow;
}

O sea, el mismo código de antes 🙂 Pero escrito de forma más cómoda y organizada.

Variables

Lo más habitual (y recomendable) a la hora de diseñar una web es emplear un número de colores bajo, aplicado a muchos elementos. Por ejemplo, los links en un determinado verde (#5AC452), que también es el color de fondo del menú y del footer, etc.

El problema en CSS es acordarse de ese código de color durante todo el desarrollo; se acabará repitiendo decenas de veces y habrá que estar comprobando siempre que está bien. Además, si en algún momento se quiere cambiar el color -por cualquier motivo- habrá que buscar y reemplazar todas las apariciones de ese código y cambiarlo por el nuevo. Incómodo y propenso a errores.

Los preprocesadores de CSS solucionan este problema con variables. Se define una variable al principio del documento, usando el signo de dólar, y sólo habrá que acordarse de su nombre. Ejemplo:

/*SASS*/
$verdeMolongui: #5AC452;

/* código... */

a {
color: $verdeMolongui;
}

#menu {
background: $verdeMolongui;
}

Al compilar, la variable se sustituye por el valor asignado al principio. Si en el futuro queremos cambiar ese color a rojo, sólo tendremos que cambiar el valor en un único punto. Tendríamos entonces una variable llamada $verdemolongui cuyo valor es rojo, pero ese es otro tema 😛 . Encontrar el equilibrio entre nombres fáciles de recordar y nombres lo más neutros posible (para que se pueda cambiar su valor) es complicado. Yo uso muchas veces $colorPrincipal, $colorsecundario o similares, pero si alguien tiene un método mejor, que lo comparta en los comentarios.

Mixins

Los mixins son aún más interesantes: se podrían definir como clases virtuales que permiten reutilizar el código muy fácilmente. El código de un mixin no se incluye en la hoja de estilos hasta que no se aplica a un selector, y se puede aplicar todas las veces que se quiera. Así, por ejemplo, se puede definir un código para los mensajes de error:

/* SASS */
@mixin error {
    padding: 10px 10px 10px 20px;
    margin-bottom:1.6em;
    border:2px solid red;
    background:#FBE3E4 url(images/assets/cross.png) no-repeat 2px center; /* Una imagen de error */
    color: red;
}

Y este código se puede aplicar a cualquier selector, sin necesidad de aplicar la clase css en el código html. Por ejempo, tenemos un div con id menganito que queremos que tenga la apariencia de un mensaje de error; le añadimos el mixin:

/* SASS */
#menganito {
    /* ...Codigo... */
    @include error /* El mixin que hemos definido antes */
}

¿Cuál es el resultado de este código en CSS? Pues los estilos que hubiéramos definido para #menganito, más los que habíamos definido en el mixin error:

/* CSS */
#menganito {
    /*... Codigo ... */
    padding: 10px 10px 10px 20px;
    margin-bottom:1.6em;
    border:2px solid red;
    background:#FBE3E4 url(images/assets/cross.png) no-repeat 2px center; /* Una imagen de error */
    color: red;
}

¿Qué se puede conseguir con esto? Pues, además de poder reutilizar código fácilmente, no tener que incluir más clases CSS de las necesarias en el HTML.

El código html no debería contener atributos de presentación, ni siquiera en sus clases css. Sin embargo, muchas veces es casi inevitable caer en el uso de clases css relacionadas con la presentación, como fleft(float left), clear (clear both) o similares. Con SASS, esto no es necesario, ya que se pueden incluir los estilos de esa clase sin necesidad de que esta exista.

Pero hay una cosa de los mixins aún mejor, y es que estos pueden contener variables. A la hora de definirlos, podemos establecer una serie de variables (opcionales o no) que se le pasarán al incluirlo. Retomando el ejemplo del mensaje de error, se podría hacer opcional el color del texto y de los bordes:

/* SASS */
@mixin error ($color) {
    padding: 10px 10px 10px 20px;
    margin-bottom:1.6em;
    border:2px solid $color;
    background:#FBE3E4 url(images/assets/cross.png) no-repeat 2px center; /* Una imagen de error */
    color: $color;
}

De esta forma, si ahora incluimos el mixin error a #menganito con el color verde (green):

/* SASS */
#menganito {
    /* ...Codigo... */
    @include error(green) /* El mixin que hemos definido antes */
}

El código CSS resultante será diferente:

/* CSS */
#menganito {
    /*... Codigo ... */
    padding: 10px 10px 10px 20px;
    margin-bottom:1.6em;
    border:2px solid green;
    background:#FBE3E4 url(images/assets/cross.png) no-repeat 2px center; /* Una imagen de error */
    color: green;
}

Con un poco de práctica e imaginación, se pueden crear mixins muy útiles… tanto, como para sustituir frameworks enteros o para solucionar el problema de los prefijos css. Si estás harto de tener que escribir código como este:

/*CSS*/
.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Firefox 16+ */
}

Puedes usar COMPASS y pasar a usar simplemente:

/* SASS */
#menganito {
    @include background-image(linear-gradient(#444444, #999999)); }
}

Y COMPASS generará por ti todo el código.

Otra funcionalidad

SASS y LESS permiten cosas aún más potentes, como funciones (operaciones matemáticas, operaciones sobre colores -como subir saturación o luminosidad-…), agrupar media queries, etc. pero como no podría explicar todo sin extenderme demasiado, os remito a la documentación de ambas:

Web de SASS
Web de LESS

Diferencia entre SASS y LESS

Como indicaba al principio, estos lenguajes son muy parecidos, pero tienen algunas diferencias, ventajas e incovenientes. La principal diferencia es la tecnología que emplean: LESS funciona con JavaScript mientras que SASS funciona con Ruby. Las diferencias entre ellos acaban derivándose en gran motivo de este hecho.

En mi caso personal, al no tener conocimiento alguno sobre Ruby, me decanté en un principio por LESS. Sin embargo, a medida que lo fui usando me fui encontrado con obstáculos para crear algún mixin o función que se me ocurría, debido a que el JavaScript se hacía un lío. Por ejemplo, SASS permite usar variables para los nombres de las propiedades CSS, y no sólo para sus valores (se puede ver un ejemplo en la web, bajo el apartado de interpolation).

Por tanto, lo que en un principio me pareció un inconveniente (el tener que instalar Ruby, frente a usar un lenguaje que ya conozco y que viene incluido en cualquier navegador como JavaScript), acabó siendo una ventaja. Instalar Ruby no fue tan complicado como parecía, no hay que saber programar nada con él para hacerlo funcionar (sigo sin saber programar en Ruby de hecho 😛 ) y SASS me parece más potente que LESS.

Conclusión

Los preprocesadores de CSS son una herramienta extremadamente útil para crear hojas de estilos de forma mucho más rápida y cómoda. Permiten crear código más semántico, ahorrarse clases CSS presentacionales, e incluso comprimir el CSS resultante.

Como peligro, si no se tiene cierto cuidado, se puede caer en la repetición innecesaria de código, al repetir mixins cuando se debería aplicar a varios selectores a la vez.

¿Usas alguno de estos lenguajes? ¿Tienes alguna duda? ¿Quieres comentar tu experiencia? ¡Deja un comentario!

 

Actualización

Podéis saber más sobre una utilísima función de SASS, los placeholders, en este tutorial que escribí en programeme.

Esta entrada fue publicada en Tutorial

5 thoughts on “SASS y LESS: CSS dinámico

  1. Hola gracias por la información, yo he estado usando Simple Less CSS lo que te compila el CSS de esa manera no uso JavaScript en el sitio web. Pero leí que al parecer era mejor porque se ahorraba números de líneas.

  2. Hola buenos dias, me acabo de meter a ver drupal y una cosa me lleva a la otra, uno de los temas a los que he llegado es «sass», no tengo mucha idea pero por lo poco que he visto puede facilitar mucho la tarea de modificación de los estilos css, me encuentro ahora intentando crear en php una hoja de estilos css dinámica un poco de andar por casa o de todo a 100, el objetivo de esta css dinámica es que en conjunto con una serie de paginas php un usuario pueda crearse un sitio web sencillo, y que el administrador del sitio pueda crear plantillas basadas en parametros css que va incluyendo en una bd, estos datos se relacionan con el css dinámico por un id del tema en cuestion y de momento funciona, ya te digo es un poco todo a 100, y aqui viene la pregunta que me estoy haciendo desde que he descubierto sass,
    ¿puedo utilizar esta extensión directamente en un sitio web para crear de forma dinámica las hojas de estilo asociadas a las plantillas que va dando de alta el administrador?
    en caso de que se pueda
    ¿necesita alguna característica especial el servidor de hosting donde tengo alojado el sitio web?
    Un saludo y muchas gracias por la información que ofreces en este articulo.

    1. Hola Millaguisan,

      Gracias por tu comentario. En primer lugar, te adelanto que no soy un gran experto en usar SASS de esa forma. Sé que existen servicios para compilar automáticamente hojas de estilo SASS/LESS (hay plugins para WordPress si no me equivoco), pero desconozco nombres.

      Sin usar «plugins» necesitas tener instalado en el servidor ruby (para SASS) o Node (para LESS). En el caso de LESS, podrían compilarse las hojas de estilo en el cliente directamente con JavaScript, para no necesitar Node, pero no sería muy buena idea ya que estaría añadiendo una carga de trabajo innecesaria al navegador del usuario.

      Siento no poder ayudarte más.

  3. Pingback: CSS semántico con SASS + Placeholders – Programeme

Deja una respuesta

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

Facebook