[Tutorial Sass] IV – Ejemplos de uso y recomendaciones

Ahora que conocemos la potencia de Sass, vamos a ver algunos casos prácticos donde podemos ver cómo podemos hacer uso de Sass a la hora de abordar operaciones cotidianas de maquetación CSS. También veremos alguna recomendación a la hora de utilizar Sass.

Ejemplos de uso

Prefijos de navegadores en propiedades CSS3

Al utilizar algunas propiedades CSS3 es conveniente incluir la definición de las versiones con prefijos de cada navegador. Una forma fácil de trabar con ellos sería definirnos un mixin en Sass para su incorporación:

[one_half]

@mixin vendor-prefix($name, $argument) {
  #{$name}: $argument;
  -webkit-#{$name}: $argument;
  -ms-#{$name}: $argument;
  -moz-#{$name}: $argument;
  -o-#{$name}: $argument;
}
.redondo {
  @include vendor-prefix(border-radius, 1px 1px 1px 1px)
}

[/one_half] [one_half_last]

.redondo {
  border-radius: 1px 1px 1px 1px;
  -webkit-border-radius: 1px 1px 1px 1px;
  -ms-border-radius: 1px 1px 1px 1px;
  -moz-border-radius: 1px 1px 1px 1px;
  -o-border-radius: 1px 1px 1px 1px; }

[/one_half_last]

Fuentes @font-face

Si tenemos un conjunto de fuentes que queramos definir a través de @font-face y las tenemos todas situadas en el mismo sitio, podemos hacer uso del siguiente bucle @each para definirlas todas a la vez:

@each $font-face in font-1, font-2, ...  {
    @font-face {
          font-family: $font-face; font-style: normal; font-weight: normal;
          src: url('/path/to/font/#{$font-face}.eot'),
          src: url('/path/to/font/#{$font-face}.eot?') format('eot'),
               url('/path/to/font/#{$font-face}.woff') format('woff'),
               url('/path/to/font/#{$font-face}.ttf')  format('truetype');
    }
}

Cross-browser opacity

Para definir el nivel de visibilidad de un elemento utilizamos la propiedad opacity indicando el nivel de visibilidad entre 0 y 1, pero esta propiedad no está disponible en IE, donde se hace una implementación basada en valores entre 0 y 100. Sería útil definir un mixin que nos asegure una definición multinavegador:

[one_half]

@mixin opacity($opacity) {
  filter: alpha(opacity=#{$opacity}); // IE 5-9+ 
  opacity: $opacity * 0.01; 
}
 
.shadow {
  @include opacity(50); 
}

[/one_half] [one_half_last]

.shadow {
  filter: alpha(opacity=50); opacity: 0.5; }

[/one_half_last]

Recomendaciones

Evitar el anidamiento excesivo

Como hemos visto en este tutorial, el anidamiento es una de sus mejores características de Sass pues, ya que nos permite definir reglas sobre selectores más específicos, teniendo un control más preciso sobre los estilos de nuestro proyecto.

El problema que podemos encontrarnos ante un uso excesivo de esta característica es que tendamos a reflejar la estructura de nuestro contenido en la estructura de nuestro CSS. Para comprender mejor este problema veamos un ejemplo sobre una página web en la que pudiésemos tener este contenido:contenido:

<div class="contenedor">
  <div class="contenido">
    <div class="articulo">
    <h1>...</h1>     
      <div class="cuerpo">
      ...
      </div>
    </div>
  </div>
</div>

Una estructura típica que pudiésemos encontrar en un blog. Haciendo uso del anidamiento, empezamos a añadir estilos y a hacer uso del anidamiento según vamos necesitando definir propiedades sobre cada elemento, siendo fácil acabar con una estructura SCSS muy parecida al contenido HTML original:

body {
  div.contenedor {
    margin: auto;
    div.contenido {
      border:1px;
          padding: 2px;
        div.articulo{
          padding: 2px;
          h1 {color: blue}
        }
      }
    }
  }
}

El problema es que al compilar este fichero nos encontramos una cosa como esta:

body div.contenedor {
  margin: auto; }
  body div.contenedor div.contenido {
    border: 1px; }
    body div.contenedor div.contenido div.articulos {
      padding: 2px; }
      body div.contenedor div.contenido div.articulos div.articulo {
        padding: 2px; }
        body div.contenedor div.contenido div.articulos div.articulo h1 {
          color: blue; }

Crear selectores tan complejos puede afectar al rendimiento del navegador a la hora de dibujar el layout de nuestra página, aparte del considerable aumento del tamaño del fichero css generado.

Otro problema añadido es que haciendo uso intensivo del anidamiento estamos ligando excesivamente nuestros estilos a la estructura del documento, generando conjuntos de reglas poco reutilizables y difíciles de mantener.

En general, hay una regla no escrita en la que se sugiere no aplicar más de 4 niveles de anidamiento. Si en algún momento nos encontramos en esta situación, esto nos debería alertar de que algo estamos haciendo mal y estamos asociando excesivamente nuestros estilos al DOM de la página. Si bien es posible que en determinadas situaciones tengamos que sobrepasar 4 niveles de anidamiento, no es una cosa que deberíamos hacer frecuentemente.

Te aconsejo que leas el siguiente artículo en The Sass Way donde explican detenidamente este problema y donde aportan algunas recomendaciones para crear nuestras reglas sin llegar a necesitar más de 4 niveles.

Creación de módulos

Ya hemos visto que Sass nos permite separar en varios ficheros nuestro código llamados partials y posteriormente importarlos todos en un único fichero mediante la directiva @import, o al menos aquellos que nos interesen.

Esta funcionalidad nos invita a fragmentar nuestro código Sass en conjuntos funcionales que eventualmente podamos reutilizar en varios proyectos, es decir, intentar que cada fichero represente un módulo independiente que podamos importar a nuestro proyecto solo en caso de necesitarlo.

Es importante remarcar que el concepto de módulo que aquí se discute no es nada ofrecido por Sass, sino unas recomendaciones a la hora de trabajar con partials que nos permitirán una mejor organización de nuestro código. Estas recomendaciones están extraídas del artículo original A Standard Module Definition for Sass.

A la hora de crear estos módulos, se pueden seguir el siguiente conjunto de recomendaciones:

1. Cada módulo en un partial: debemos separar nuestros módulos en partials, que como vimos en el capítulo 2 eran ficheros con prefijo _ destinados a ser importados, no a generar ficheros .css.
2. Un módulo no debe generar código por sí mismo: es decir, un módulo solo contendrá mixins, funciones y variables Sass, de forma que únicamente importando dicho módulo no generaremos ningún código CSS de salida, salvo que invoquemos a algún mixin contenido en el módulo.
3. Cada módulo contendrá un mixin principal: este mixin estará situado al principio del fichero y hará un uso estándar de las funciones y mixins que incorpora el módulo, generando un conjunto estándar de estilos del módulo. Por ejemplo, supongamos que tenemos un módulo para crear botones, donde hemos incorporado un conjunto de mixins y funciones que nos permitirán generar distintos tipos de botones, con distintos colores, tamaños, etc. El mixin principal se encargaría de generar un conjunto estándar de botones, pongamos por ejemplo, botones rojo, verde y amarillo en tamaños pequeño, mediano y grande. De esta forma, sin necesidad de conocer el funcionamiento de los mixins y funciones incorporadas en el módulo, podremos tener una gama estándar de botones ofrecidas por el módulo. Además, examinando el funcionamiento de dicho mixin principal podremos obtener una mejor visión de cómo se utiliza dicho módulo, en caso de queramos generar nuestros propios botones con otros tamaños y colores.
4. Todas las variables con !default: como explicamos en el capítulo 2, incorporando la directiva !default al final de las asignaciones en nuestras variables estaremos indicando que dicho valor únicamente se aplicará si dicha variable no se ha definido con anterioridad. Si la incluimos en todas las definiciones de variables de nuestro módulo, esteremos permitiendo que se puedan personalizar sin necesidad de modificar el contenido del módulo.

Conclusión

Con este capítulo doy por finalizado el tutorial de Sass. Espero que te haya gustado y que hayas aprendido al menos tanto como lo he hecho yo. He de reconocer que una vez que empiezas a utilizar Sass ya no te sentirás tan cómodo escribiendo sucio CSS «a pelo».

Para terminar, dejarte un par de links donde podrás encontrar más información sobre este lenguaje:

• The Sass Way: blog con artículos relacionados con Sass
• Documentacion oficial: documento de referencia donde encontrarás todo lo que se puede hacer con Sass. Además, encontrarás la definición de todas las funciones ofrecidas para tratamiento de colores, cálculos matemáticos, etc.