Worköholics, comunicación y proyectos digitales.

Sass y hojas de estilo dinámicas, superhéroes en el mundo de los CSS

Tecnología/ UI

Hace ya bastante tiempo que se empezó a hablar de preprocesadores de CSS. Hojas de estilo con super poderes de las que una vez acostumbrado, te resultará imposible separarte.

Este tipo de archivos nos permiten hacer uso de variables, funciones, directivas y demás funcionalidades, para después compilarlos obteniendo archivos CSS normales.

Seguramente te preguntarás el motivo de añadir otro grado de complejidad a tu espacio de trabajo, pero puedes estar seguro de que en poco tiempo te darás cuenta de las grandes ventajas que nos ofrece.

Existen diferentes preprocesadores, pero todos comparten el mismo objetivo, escribir y mantener código CSS más rápido y con menor esfuerzo. En nuestro caso utilizamos Sass, por tener una comunidad y referencia más extensa, pero existen otras opciones como Less o Stylus.

Sass y hojas de estilo dinámicas, superheroes en el mundo de los CSS
Sass y hojas de estilo dinámicas, superheroes en el mundo de los CSS
Sass y hojas de estilo dinámicas, superheroes en el mundo de los CSS

Estas son solo algunas de las razones por las que me resulta interesante utilizar herramientas como Sass, pero obviamente hay muchas más.

1. Son compatibles con archivos CSS convencionales.

El hecho de que sean compatibles con archivos CSS  convencionales nos permitirá combinar por ejemplo, archivos en formato Sass con archivos CSS, haciendo posible el uso de librerías de este tipo.

2. El uso de variables te ahorrará mucho tiempo en el mantenimiento de tu código.

¿Cuantas veces, después de un cambio de diseño en nuestra web, hemos tenido que cambiar un valor común repetidas veces? ¿Cuántas veces habremos tratado de retener en nuestra memoria códigos de color, medidas o espaciados?

Con los preprocesadores podremos utilizar variables para albergar valores que utilizaremos a lo largo de nuestra hoja de estilos. Estas variables son capaces de albergar distintos tipos de valores: números, cadenas de caracteres, colores, booleanos, listas y mapas, soportando las unidades de medida que usamos comúnmente en nuestros CSS. También podremos cambiar el valor de las mismas tantas veces como queramos a lo largo del código.

A continuación vemos un ejemplo de declaración y asignación de variables.

/* Declaración de variables */
$dark-blue: #0b00a8; 
$gutter: 15px;

/* Asignación de variables */
p
{
  color: $dark-blue;
  margin-bottom: $gutter;
}

Puedes consultar la documentación de variables de Sass, Less y Stylus

3. Es posible obtener valores a través de operaciones aritméticas.

Los preprocesadores de CSS nos permiten realizar operaciones aritméticas. La única restricción es que no operemos con unidades de medida distintas, ya que supondría un error a la hora de compilar el archivo. Asimismo podremos emplear las variables mencionadas en el punto anterior.

$f-size : 1.2em;
$gutter : 15px;
a.bigger
{
  font-size: $f-size + 0.2em; // $f-size + 0.2em = 0.4em;
  margin-bottom: $gutter /2; // $gutter / 2 = 7.5px;
}

Puedes consultar la documentación sobre operadores de Sass, Less y Stylus

4. Tener las hojas de estilo organizadas es más fácil utilizando los selectores anidados.

Uno de los grandes beneficios de utilizar herramientas como Sass es servirse se los selectores anidados. En un CSS convencional lo normal es encontrarnos a las partes del selector que hacen referencia a un elemento padre muchísimas veces por la necesidad de añadir reglas a sus hijos y así sucesivamente. Con los preprocesadores evitaremos esas repeticiones usando los selectores anidados. Esta funcionalidad, aparte de simplificar nuestro código, nos permite tenerlo organizado, ya que estructuraremos nuestra hoja de estilos jerárquicamente.

Css

#main{
  ...
}
#main .sidebar{
  ...
}
#main .sidebar > ul,
#main .sidebar > ol{
  ...
}
#main .sidebar > ul li,
#main .sidebar > ol li{
  ...
}
#main .sidebar  ul li:first-child{
  ...
}
#main .sidebar  ul li:hover,
#main .sidebar  ol li:hover
{
  ...
}

Sass

#main{
  ...
  .sidebar{
    ...
    >ul,
    >ol{
      ...
      li{
        ...
        &hover{
          ...
        }
      }
    }
    >ul li{
      ...
      &:first-child{
        ...
      }
    }
  }
}

Puedes consultar la documentación sobre anidacion de reglas de Sass, Less y Stylus

5. Importar otras hojas de estilo en un preprocesador CSS es más eficiente que importarlas en un CSS convencional.

CSS ya tiene implementada la función de importar hojas de estilo. Esto nos permite crear archivos con menos código, para un mantenimiento más eficiente, pero eso nos generará una petición HTTP por cada importación que hagamos.

En cambio, el uso del preprocesador nos permitirá incluir en nuestra hoja de estilos principal cuantos archivos queramos, generando un solo CSS final y una sola petición HTTP.

Puedes consultar la documentación sobre directivas import de Sass, Less y Stylus

6. Reutilizar código CSS es posible gracias a los “mixins”.

Otro de los puntos más atractivos de herramientas como Sass son los “mixins”, directivas que nos ofrecen la posibilidad de implementar cierta funcionalidad que podremos reutilizar a lo largo de nuestra hoja de estilos. En este tipo de elementos podremos incluir reglas css, selectores e incluso otras directivas. Asimismo los “mixins” soportan la utilización de parámetros. Un ejemplo claro de uso de un “mixin” puede ser la continua repetición de los prefijos de los navegadores de CSS.

Css

.btn
{
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: .35s all;
  -moz-transition: .35s all;
  -ms-transition: .35s all;
  transition: .35s all;
}

Sass

/* Declaración del mixin */
@mixin prefixer($property,$value)
{
  -webkit-#{$property}: $value;
  -moz-#{$property}: $value;
  -ms-#{$property}: $value;
  #{$property}: $value;
}

/* Uso del mixin */
.btn
{
  @include prefixer(border-radius,50px);
  @include prefixer(transition,.35s all); 
}

Cómo vemos en el ejemplo, simplemente tenemos que declarar un “mixin” al que pasaremos parámetros para poder utilizarlo las veces que sea necesario evitando el hecho de estar repitiendo continuamente los prefijos de los navegadores. Las palabras reservadas para este tipo de directiva son @mixin para su declaración e @include para su inclusión.

Puedes consultar la documentación sobre mixins de Sass, Less y Stylus.

7. La herencia también es una forma de simplificar tu código.

En un CSS convencional, utilizamos las clases para dar un estilo común a distintos elementos. Con los preprocesadores CSS mantenemos la misma lógica, pero además podemos hacer referencia a una o más clases desde un selector para que el mismo obtenga las propiedades de la clase referenciada. Es tan fácil como usar la palabra @extend seguida de la clase que se quiere heredar.

.message
{
  …
}
.sucess-message
{
  @extend .message;
  color: green;  
}
.error-message
{
  @extend .message;
  color: red; 
}

En el ejemplo hemos visto como tenemos una clase .message que queremos que sea común en los selectores .error-message y .success-message. Asimismo .success-message y .error-message tienen sus propios estilos.

Puedes consultar la documentación sobre directivas extend de Sass, Less y Stylus.

8. Las funciones predefinidas de cada procesador e incluso las que tu mismo implementes te pueden ser de mucha utilidad.

Las funciones nos permiten resolver tareas especificas obteniendo como resultado un valor. Este tipo de directiva nos permite utilizar parámetros (igual que los “mixins”). website change monitor . Sass contiene un amplio número de funciones predefinidas que nos pueden ser de gran ayuda a la hora de escribir nuestro código. Por ejemplo lighten($color,$amount) para aclarar un color o percetage($number) para convertir un número a porcentaje. Para declarar una función utilizamos la palabra reservada @function y devolvemos el resultado con @return.

/*Declaración*/
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

/*Uso*/
#sidebar { width: grid-width($n: 5); }

9. Las directivas de control nos ofrecen una funcionalidad extra.

Si con toda la funcionalidad que ya hemos mencionado no te parece suficiente, tenemos las directivas de control, que nos permitirán realizar operaciones condicionales e incluso bucles. Gracias a este tipo de directivas podremos ahorrar mucho tiempo a la hora de escribir código. En el siguiente ejemplo podremos ver un bucle que nos permitirá crear clases de ayuda para gestionar paddings y margins verticales.

$i : 9; //Quantity of values you need
$gutter: 15px;
@while $i >= 0 
{
  @each $side in top, bottom 
  {
    @each $property in padding, margin
    {
      @if($property == padding)
      {
	.p-#{$side}-#{$i}
	{
	  #{$property}-#{$side} : $gutter * $i !important;
	  @include media_query(767px){
	    @if($i >= 3)
            {
	      #{$property}-#{$side} : $gutter * $i / 2 !important;
            }
            @else if($i == 0)
            {
              #{$property}-#{$side} : 0 !important;
            }
            @else
            {
              #{$property}-#{$side} : $gutter !important;
            }
	  }
	}
      }
      @if($property == margin)
      {
	.m-#{$side}-#{$i}
	{
	  #{$property}-#{$side} : $gutter * $i !important;
	  @include media_query(767px){
	  @if($i >= 3)
          {
            #{$property}-#{$side} : $gutter * $i / 2 !important;
          }
          @else if($i == 0)
          {
            #{$property}-#{$side} : 0 !important;
          }
          @else
          {
            #{$property}-#{$side} : $gutter !important;
          }
	}
       }
     }
   } 
  }
  $i : $i - 1;
}

Este bucle nos creará clases como esta .p-top-3. El primer trozo (p/m) indica si nos referimos al padding o al margin, el segundo indica si es (padding/margin) superior o inferior y por último tendremos el número que indicara las veces que se multiplicará el valor de la variable $gutter que hayamos definido.

Puedes consultar la documentación sobre directivas de control de Sass, Less y Stylus.

10. A todo esto le sumamos la capacidad de configurar el formato CSS de salida a nuestra hoja de estilos resultante.

Gracias a herramientas como Sass obtenemos una sola hoja de estilos resultante partiendo de nuestro código, pero lo magnífico, es poder configurar el formato de salida. Podemos escoger si queremos que sea :compressed, :compact, :expanded o :nested.

 

La curva de aprendizaje de estas herramientas es leve, todo depende del grado en el que quieras profundizar en ellas. Estas han sido 10 razones por las que utilizar preprocesadores CSS pero existen muchas funcionalidades más que te invito a conocer.

CUÁNDO

Jueves 16 de Abril de 2015

QUIÉN

Igor Nieto

Front-End Developer

DÓNDE

Bilbao

COMPARTE


Igor Nieto

Front-End Developer

  • CUÁNDO:

    Jueves 16 de Abril de 2015

  • DÓNDE:

    Bilbao

  • QUÉ:
    Tecnología , UI
  • COMPARTE:
  • Blog