Cerrar
Image Alt

Extend en Sass

Seguimos con nuestro curso de Sass, y esta vez vamos a ver Extend. Ya vimos en el artículo anterior sobre Mixins cómo había ocasiones en las que estos creaban un CSS poco eficiente, siendo recomendable el uso de Extend.

Recordemos. Teníamos:

Y haciéndolo más eficiente, con selectores separados por comas:

Veíamos que no era posible conseguir esto con Mixins, pero sí lo vamos a poder conseguir con Extend (que se escribe con el símbolo @ más extend seguido del selector del que queramos importar sus estilos):

Como vemos, en .btn-b hemos escrito background: black; debajo de @extend, para sobreescribir el valor que importa @extend. Extend añadirá una segunda declaración para los valores únicos (en este caso background: black;), con lo que el resultado será el que queríamos:

La ventaja es que no toma simplemente los estilos de .btn-a y los inserta en .btn-b, duplicando los estilos, sino que separa con comas los dos selectores aplicando los estilos, con lo cual estos últimos se aplican de forma más eficiente.

Extend con anidación de selectores

Extend se puede complicar un poco si tenemos selectores anidados. Por ejemplo, si tenemos en nuestro archivo .scss:

¿Cual será el resultado, teniendo en cuenta que .contenido tiene anidado un estilo para los elementos p? Cuando se compile, no sólo se crearán para .lateral los estilos de .contenido, sino que también se crearán para .lateral p:

Limitaciones de extend a tener en cuenta

No podremos extender directamente el selector anidado. Por ejemplo, esto daría error:

Tampoco podremos extender desde dentro de un media-query a un selector definido fuera de un media query:

Esto se puede hacer:

Pero esto no:

Otra limitación es que podemos crear, si no tenemos cuidado, un código CSS demasiado confuso o ineficiente, por eso es importante echar un ojo a lo que estamos consiguiendo tras cada compilación.

Cuidado con Extend…

Vemos que Extend es muy potente, pero también hay que tener cuidado al usarlo. En el ejemplo anterior veíamos que estamos importando los estilos de .contenido en .lateral. Pero, ¿qué sucede si más adelante cambiamos algo en .contenido dentro de nuestra hoja .scss?

Tendremos al compilar un efecto quizás no deseado, al crearse un estilo para .home .lateral, ya que como en .lateral extendemos .content, cualquier cosa que hagamos en .content tendrá reflejo en .lateral:

Tal y como decíamos, al extender para .lateral todos los estilos de .contenido, también añadirá esta última adicción que hemos introducido. La solución son los llamados placeholder selectors (selectores con marcadores de posición).

Placeholder selectors (Selectores comodín)

Los «Placeholder selectors» se escriben con el símbolo de porcentaje: % y pueden extenderse, pero nunca pueden ser un selector en sí mismos.

Si tomamos el ejemplo anterior:

que implicaba que todo lo que hiciéramos en .contenido se crearía también para .lateral.

La manera de hacerlo con un placeholder selector sería:

De esta forma evitamos problemas. Como vemos, contenido-base no es un selector real, sino una especie de selector comodín sin reflejo en el HTML. Existe sólo a efectos del archivo .scss

El «placeholder selector» se suele usar para bloques de código usados con frecuencia, evitando así la creación de nuevas clases en el HTML. Por ejemplo, supongamos que usamos mucho este bloque de CSS:

Obtendremos:

Comentarios

  • Luis Aguilar

    Gracias por este curso de Sass, todo esta explicado de una forma muy clara y concisa, solo tengo una pregunta ¿Seguiran los articulos de este curso o este es el ultimo?

    Saludos

    17 octubre, 2014
    contestar

Escribe un comentario