¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Los mapas en Sass

Los mapas en Sass es algo que es relativamente nuevo. No, no me refiero a mapas en los que consultar cómo llegar al veterinario.

Desde la versión 3.1.0 de Sass se podían usar listas, que vienen a ser matrices unidimensionales. Con la llegada de 3.3, podemos tener listas multidimensionales o mapas. Cuando los veas estoy seguro de que te recordarán a JSON:

$mapa: (
  clave1: valor1,
  clave2: valor2,
  clave3: valor3
);

Veamos un ejemplo real. ¿Has hecho alguna vez una lista de botones sociales? Sí esos para Twitter, Facebook, etc. Como esos que tengo ahí arriba. Veamos el código HTML:

<div class="widget social-links">  
  <h3 class="widget__title">Encuéntranos en las redes</h3>
  <ul>
    <li class="social-link social--twitter">
      <a href="https://twitter.com/funcion13" target="_blank" title="Sígueme">
        <i class="icon-twitter-bird"></i> ¡Sígueme!
      </a>
    </li>
    <li class="social-link social--facebook">
      <a href="https://www.facebook.com/pages/Funci%C3%B3n-13/341830245827906" title="Likéame" target="_blank">
        <i class="icon-facebook"></i> ¡Likéame!
      </a>
    </li>
    <li class="social-link social--github">
      <a href="https://github.com/Belelros" title="Forkeame" target="_blank">
        <i class="icon-github"></i> ¡Forkéame!
      </a>
    </li>
    <li class="social-link social--rss">
      <a href="https://www.funcion13.com/rss/" title="Suscríbete" target="_blank">
        <i class="icon-rss-outline"></i> ¡Suscríbete!
      </a>
    </li>
  </ul>
</div>  

¿Sencillo no? Veamos cómo podemos hacer uso de los mapas en Sass:

$social: (
  facebook: #3b5998,
  github: #4183c4,
  googleplus: #dd4b39,
  linkedin: #007bb6,
  twitter: #00aced,
  youtube: #b00,
  rss: #f60
);

@each $social, $bgcolor in $social {
  .social--#{$social} {
    background-color: $bgcolor;
  }
}

Como puedes ver, la sintaxis es bastante sencilla. Tenemos un mapa que asigna redes sociales con su color.

Con la etiqueta @each podemos iterar por el mapa, separando la clave el valor en dos variables: $social y $bgcolor respectivamente. Con esto, .social--#{$social} podemos interpolar el valor de $social y crear una clase.

Veamos cómo queda en CSS:

.social--facebook {
  background-color: #3b5998;
}

.social--github {
  background-color: #4183c4;
}

.social--googleplus {
  background-color: #dd4b39;
}

.social--linkedin {
  background-color: #007bb6;
}

.social--twitter {
  background-color: #00aced;
}

.social--youtube {
  background-color: #b00;
}

.social--rss {
  background-color: #f60;
}

Como ves, con solo unas pocas líneas de Sass podemos lograr ahorrarnos mucho trabajo con CSS.

Si aun no estás familiarizado con Sass y/o no sabes cómo trabajar con este preprocesador, te recomiendo que primero eches un vistazo a la Introducción sobre Sass que publiqué.

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!