Extend en Sass

Extend en Sass

0 463

Seguimos con nuestro curso de Sass, y esta vez veremos Extend. Ya vimos en el artículo anterior sobre Mixins de qué manera había ocasiones en las que estos creaban un CSS poco eficaz, siendo aconsejable el uso de Extend.

Recordemos. Teníamos:

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

Veíamos que no era posible lograr 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 deseemos importar sus estilos):

Como vemos, en .btn-b hemos escrito background: black; bajo @extend, para sobreescribir el valor que importa @extend. Extend añadirá una segunda declaración para los valores únicos (en un caso así 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 aparta con comas los dos selectores aplicando los estilos, con lo que estos últimos se aplican de forma más eficaz.

Extend con anidación de selectores

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

¿Como será el resultado, teniendo presente 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 asimismo se van a crear para .lateral p:

Limitaciones de extend a tener en cuenta

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

Tampoco vamos a poder 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, mas asimismo hay que tener precaución al usarlo. En el ejemplo anterior veíamos que estamos importando los estilos de .contenido en .lateral. Mas, ¿qué sucede si más adelante cambiamos algo en .contenido dentro de nuestra hojascss?

Tendremos al compendiar un efecto quizás no deseado, al crearse un estilo para .homelateral, puesto 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 y cada uno de 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 situación).

Placeholder selectors (Selectores comodín)

Los Placeholder selectors” se escriben con el símbolo de porcentaje: por ciento y pueden extenderse, mas nunca pueden ser un selector en sí.

Si tomamos el ejemplo anterior:

que implicaba que todo cuanto hiciésemos en .contenido se crearía asimismo para .lateral.

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

De esta forma evitamos inconvenientes. Como vemos, contenido-base no es un selector real, sino una suerte de selector comodín sin reflejo en el HTML. Existe solo a efectos del archivoscss

El placeholder selector” se suele emplear para bloques de código usados habitualmente, evitando de este modo la creación de nuevas clases en el HTML. Por servirnos de un ejemplo, imaginemos que utilizamos mucho este bloque de CSS:

Obtendremos:

NO COMMENTS

Leave a Reply