Descubriendo Sass (Parte 2). Mixins y Extend

descubriendo-sass

Descubriendo Sass (Parte 2). Mixins y Extend

Seguimos desgranando Sass. En esta ocasión vamos a ver otra de sus increíbles ventajas y cómo podemos aprovecharla. Vamos a hablar de Mixins y de la función Extend.

Para ello, tenéis la guía en la web oficial de sass: https://sass-lang.com/guide.

Tanto los Mixins como el Extend son algo así como «funciones» para el código css. ¿Qué queremos decir con esto? Básicamente, nos permiten guardar fragmentos de código que luego podremos reutilizar dentro del documento, usando una sola línea.

Extend

La función Extend es muy sencilla. Podremos crear una especia de «clase», como si fuese un objeto en programación, y un selector podrá heredar las características de dicha clase.

Por ejemplo, podremos que hacer que nuestros títulos tengan el siguiente formato, independientemente de si es un h2, h3, h4…

%titulos {
	text-transform: uppercase;
	display: inline-block;
	color: #333;
	border: 1px solid #333;
}

Luego bastaría con llamar a esta clase dentro de nuestro selector de la siguiente manera.

h2.titulo {
	font-size: 1.5em;
	@extend %titulos;
}

Así, podremos crear un estilo predefinido que vayamos a usar varias veces en nuestro diseño.

Por ejemplo, podríamos crear Extends para elementos en posición absoluta que vayan a estar totalmente centrados, o para hacer capas que cubran totalmente su contenedor.

%centrado {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

%overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

Mixins

Los Mixins de Sass, hacen algo parecido a lo que hemos visto con Extend. Encapsulan varias líneas de código que posteriormente podemos llamar dentro de un selector.

Sin embargo, los Mixins incorporan una novedad. Permiten pasarles un argumento que podrá tener un valor distinto cada vez que lo usemos.

Me explico. Los Mixins se crean de la siguiente manera:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Como veis en el ejemplo, al crear el mixin utilizamos «@mixin nombreDelMixin($argumento)».

Esto se parece mucho a crear una función de javascript: creamos la función y le pasamos un método, una variable que servirá dentro de la función. Con los Mixins sucede algo similar. Le pasamos una variable interna, de tal manera que el valor de dicha variable lo escogeremos al llamar al mixin con @include.

¿Para qué pueder servir esto? Tiene muchísimas aplicaciones, pero entre ellas esta el ahorrarnos código cuando tengamos que usar prefijos. El código de arriba es una muestra de ello. Como veis el valor del border-radius lo declaramos una vez. No obstante, siempre que utilicemos «@include border-radius» estaremos usando el prefijo para todos los navegadores, de tal manera podremos hacer cross browsing de una forma sencilla y cómoda.

¿No es genial?

En el siguiente artículo, veremos algunas funciones que nos trae Sass y daremos más ejemplos de cómo utilizar este lenguaje con lo que hemos aprendido hasta ahora.

¡Hasta la próxima!

Escribe un comentario