css-header

Crear selectores dinámicos con scss/sass

Esta característica me encanta. SCSS/SASS (aka SCSS) nos permite crear selectores de forma dinámica.
Esto quiere decir que podemos reutilizar de una forma mucho mas eficiente y elegante nuestras estructuras CSS.

Por ejemplo, imagina que con CSS maquetas un menú que tiene esta estructura:

1
2
3
4
5
6
7
<div class="menu-principal">
    <ul>
        <li>
            <a href="/home">Inicio</a>
        </li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
#menu-principal {
    border-bottom: 5px solid #0062A0;
}
#menu-principal ul {
    border-bottom: 2px solid #F5E742;
}
#menu-principal ul li {
    background: none repeat scroll 0 0 #ADFF2F;
}
#menu-principal ul li a {
    color: #8B0000;
}

Ok, el problema con CSS es que reutilizar código imposible, simplemente no existe la encapsulación en el, y de ahí que hayan nacido compiladores CSS como SCSS (SASS).

En nuestro ejemplo vamos a crear una versión de nuestro CSS en SCSS para poder reutilizar las reglas CSS sin importar como se llame el contenedor (en este caso vemos que se llama “menu-principal”):

1
2
3
4
5
6
@mixin dinamico($selector) {
  #{$selector} {
  }
}
 
@include dinamico("#primary-menu");

Lo que hice acá es un mixin (una funcion) y luego la invoqué.
El resultado será:

1
2
#primary-menu {
}

La ventaja es obvia, podemos crear un mixin que genere estructuras comunes de menú (verticales, horizontales) sin importar el nombre del selector, siempre que el markup sea el mismo (ideal para Drupal, WordPress y cualquier programa que tenga un output estándar para sus estructuras HTML).

Hagamos el ejemplo inicial en SCSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@mixin menu-vertical($menu-selector) {
  #{$menu-selector} {
    border-bottom: 5px solid #0062A0;
    ul {
      border-bottom: 2px solid #f5e742;
      li {
        background: #adff2f;
        a {
          color: #8b0000;
        }
      }
    }
  }
}
 
@include menu-vertical("#menu-principal");

 

Listo, una vez declarado solo hemos usado ‘@include menu-vertical(“#menu-principal”);’ para generar todo el CSS usando “#menu-principal” como selector base, aunque nada nos impide usar ‘@include menu-vertical(“.otro-menu-de-otro-proyecto”);’ para aprovecharlo en otros proyectos.

Chau!