OmbuShop Crea Tu Tienda Online

Mixins vs. herencia en SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

SASS optimiza la manera de trabajar con CSS, ayudándonos a evitar la repetición de código. Analizaremos por qué conviene utilizar herencia, antes que mixins, en casi todos los casos.

Como sabemos, en SASS existen diversas técnicas para optimizar de forma inteligente la escritura de código CSS que se aplicará a varios elementos del DOM de nuestro sitio, de forma que evitemos la repetición de código.

Sin embargo, pocos conocen en profundidad las diferencias que resultan del uso de una u otra técnica, y cuál es la repercusión en el CSS compilado final. Analizaremos punto por punto cómo funcionan cada uno de estos métodos.

Funcionamiento de mixins

Un mixin nos permite definir una serie de líneas de código SASS, para luego incluirlas donde sea necesario, de la siguiente manera:


@mixin boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@include boton;
background: #0BE66A;
}
.boton-secundario {
@include boton;
background: #DDDDDD;
}

See the Pen jFtyv by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Clickear “view compiled” para ver el código CSS compilado.

Como verán, el código del mixin queda incluido en donde fue indicado por medio del @include. El beneficio es indudable: cuando queramos modificar alguna de estas características, lo haremos en un único lugar que tendrá repercusión en todas aquellas partes del código donde fue insertado.

Sin embargo, la desventaja está a la vista: tenemos código repetido en el archivo CSS compilado. La generación de código repetido en un archivo CSS es algo que todo frontender experimentado en CSS sabe cómo evitar, pero suele ceder ante la tentación de los mixins en cuanto descubre SASS.

La ventaja de utilizar herencia

Otra opción, que funcionalmente genera el mismo resultado, es utilizar herencia. En SASS existe la posibilidad de crear un selector (por ejemplo para cierta class) y hacer que otros selectores hereden este código. Veamos un ejemplo:


.boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@extend .boton;
background: #0BE66A;
}
.boton-secundario {
@extend .boton;
background: #DDDDDD;
}

See the Pen DIbBK by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Como vemos, el funcionamiento es idéntico al caso anterior, pero el código CSS resultante es muy distinto. Ya no tenemos repetición de código en el archivo compilado, sino un uso más inteligente de agrupación de selectores.

Siempre que podamos utilizar herencia (con extend) en vez de mixins (con include), debemos hacerlo!

Placeholders

Un feature poco conocido de SASS son los placeholders. Nos permiten utilizar la herencia sin la generación de nuevas classes que de todas maneras no estarían siendo utilizadas.

El placeholder nos provee de un espacio para guardar varias líneas de código, que luego aparecerán en el CSS compilado únicamente en el interior de los selectores que las heredan. A continuación, un ejemplo:


%boton {
font-size: 24px;
padding: .5em .8em;
border-radius: 3px;
border: none;
cursor: pointer;
}
.boton-principal {
@extend %boton;
background: #0BE66A;
}
.boton-secundario {
@extend %boton;
background: #DDDDDD;
}

See the Pen Dckxi by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Fíjense el código resultante, verán que es casi idéntico al anterior, con la diferencia de que la clase boton no ha sido creada.

Por último: ¿cuándo utilizar mixins?

Los mixis son útiles en ciertos casos particulares, no es cuestión de abandonarlos del todo. ¿Cuándo utilizarlos? Será cuando se trate de mixins que inlcuyan parámetros, es decir un input que modificará el código resultante del mixin. Esta función es única y no puede ser reemplazada por ningún otra técnica disponible en SASS.

Aquí un ejemplo del uso de mixins con parámetros:


%boton {
font-size: 24px;
padding: .5em .8em;
border: none;
cursor: pointer;
}
@mixin boton-color-radius($color, $radius){
@extend %boton;
background: $color;
border-radius: $radius;
}

.boton-principal {
@include boton-color-radius(#0BE66A, 3px);
}
.boton-secundario {
@include boton-color-radius(#DDDDDD, 15px);
}

See the Pen mkIyb by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Los invitamos a seguir probando con esta maravillosa tecnología llamada SASS!

  • Fernando

    Ahora ya me queda clara las diferencias.
    Muchas gracias.