Extends

<< Mixin Math + Color >>

En el punto anterior vimos mixin, encapsular y reutilizar estilos usando Sass. Con Sass podemos también combinar selectores utilizando la directiva @extend.

.btn-a {
    background: #777;
    border: 1px solid #ccc;
    font-size: 1em;
    text-transform: uppercase;
}
.btn-b{
    @extend .btn-a;
    background: #ff0;
}

¿Qué es lo que ocurriría si usamos selectores nested y extend?

En este ejemplo, estamos extendiendo .content en nuestra declaración, pero .content tiene un bloque para los h2 dentro. Cuando compilamos el código anterior, no solo se añade lo que contiene .content a .callout, sino que también hereda el h2. extend es bastante útil ya que podemos combinar selectores en nuestra hoja de estilos. Pero tiene algunos problemas. Por ejemplo:

.btn-a{
    background: #777;
    border: 1px solid #ccc;
    font-size: 1em;
    text-transform: uppercase;
}
.btn-b{
    @extend .btn-a;
    background: #ff0;
}
.sidebar .btn-a{
    text-transform: lowercase;
}

Al heredar .btn-b las propiedades de .btn-a, las hereda tanto del selector .btn-a como también del selector .sidebar .btn-b (cuando .btn-a está dentro de .sidebar), por lo que también se creará una regla idéntica para cuando .btn-b esté dentro de .sidebar.

Por tanto, desde el momento en el que el .btn-b extiende de .btn-a, cualquier cambio que hagas desde .btn-a usando otros selectores afectará a .btn-b. Esto lo podemos solventar usando selectores "placeholder" como veremos a continuación.

Los selectores placeholder en Sass están precedidos por el símbolo del porcentaje (%), además, pueden ser extendidos, pero nunca serán un selector en sí mismos. Si volvemos al ejemplo anterior de los botones y usamos un placeholder de forma que las partes comunes las agrupamos y hacemos que .btn-a y .btn-b extiendan del placeholder.

%btn {
    background: #777;
    border: 1px solid #ccc;
    font-size: 1em;
    text-transform: uppercase;
}
.btn-a {
    @extend %btn;
}
.btn-b {
    @extend %btn;
    background: #ff0;
}
.sidebar .btn-a {
    text-transform: lowercase;
}

Los selectores placeholder son bastante útiles cuando queremos reusar estos estilos CSS en nuestra hoja de estilos. Aquí tenemos otro ejemplo:

%ir {
    border: 0;
    font: 0/0 a; // anulamos la fuente
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}
.logo {
    @extend %ir;
}
.social {
    @extend %ir;
}

Por último, antes de acabar este punto decir que debemos tener cuidado ya que las versiones anteriores a IE9 tiene el límite de 4095 selectores CSS por archivo, por tanto, si usamos muchos extend o muchos imports puede que alcancemos el total de 4095 selectores que tiene como límite, si se llega a sobrepasar ese límite todo lo que se sobrepase será ignorado.

<< Mixin Math + Color >>