En el artículo anterior, comenzamos a examinar las características principales de Sass. Por lo extenso del tema, decidimos dejar para un nuevo artículo tres conceptos muy importantes: Operators, Mixins y Extends.
Los dos últimos, no son difíciles de comprender pero sí es necesario una explicación clara junto a ejemplos para no confundirlos. Es muy común que al comenzar a utilizar Sass, muchos no entendamos a las primeras de cambio cual es la verdadera función de cada uno. Esto se debe a que ambos funcionan de manera parecida: fragmentos de estilos que pueden reutilizarse en cualquier lugar.
Hoy vamos a conocer esos puntos, dando conceptos, ejemplos y por último, me gustaría invitarlos a realizar una pequeña prueba para ir midiendo que tanto hemos aprendido y compartir más ampliamente nuestros conocimientos, dudas y sugerencias.
Dejemos a un lado, por el momento, los Mixins y Extends. Vamos a concentrarnos en la característica más sencilla de Sass que explicaremos hoy.
Operadores (Operators):
Realizar operaciones matemáticas en CSS, es posible gracias a Sass. Contamos con un puñado de operadores: (+, -, *, / y %) que trabajan de la misma forma que las operaciones matemáticas básicas que aprendimos en la escuela.
Supongamos que deseamos crear un simple grid, basado en 960px y que el ancho de cada elemento sea expresado en porcentajes:
$wrap: 960px;
article[role="main"] {
float: left;
width: 630px / $wrap * 100%;
}
aside[role="complimentary"] {
float: left;
width: 330px / $wrap * 100%;
}
Sass nos imprimirá el siguiente CSS:
article[role="main"] {
float: left;
width: 65.625%;
}
aside[role="complimentary"] {
float: left;
width: 34.375%;
}
Listo, tenemos un grid básico que nos permite estructurar nuestro contenido de una manera agradable en dos columnas. El uso de los operadores es muy sencillo, estoy seguro que en algún momento les será de mucha utilidad.
Extends / Placeholders:
Es una de las más poderosas características de Sass y al mismo tiempo la más peligrosa. Nos permite crear un fragmento de estilos que luego podamos reutilizar fácilmente en cualquier componente. Los Extends nos ayudan a escribir Sass haciendo uso del principio DRY.
Básicamente nos permite generar menos CSS con mayor cantidad de selectores.
Cómo usarlo:
Para declarar y crear un fragmento de estilos que necesitamos reutilizar, usamos el signo % (porcentaje) seguido de un nombre, sin espacios. Luego, para imprimir o reutilizar el Extend dentro de un componente, usamos la palabra clave @extend seguido de un espacio y por último, el nombre que asignamos a nuestro fragmento.
Hagamos un pequeño ejemplo: supongamos que queremos crear un componente básico para imprimir mensajes del sistema, debemos tener una clase para mensajes exitosos, de advertencia y de errores.
Los tres tipos de mensajes compartirán ciertos estilos básicos, tenemos tres opciones:
- Repetimos los estilos comunes en cada una de las clases correspondientes. (mala idea).
- Usamos una clase de ayuda (helper class) para los estilos comunes, así en nuestro HTML necesitaríamos usar dos clases en vez de una:
.message .message-error, .message .message-success, .message .message-warning
Por ejemplo:<div class="message message-success"></div>
- Creamos un Extend, que también podríamos llamar «helper class» pero en este caso se usarán en Sass no en HTML. A continuación, un pequeño ejemplo:
// vars
$bg-success: green;
$bg-error: red;
$bg-warning: orange;
// extend
%message {
border-radius: 2px;
color: white;
padding: 5px;
text-align: center;
}
.message-success {
@extend %message;
background-color: $bg-success;
}
.message-error {
@extend %message;
background-color: $bg-error;
}
.message-warning {
@extend %message;
background-color: $bg-warning;
}
Sass nos imprimirá el siguiente CSS:
.message-success, .message-error, .message-warning {
border-radius: 2px;
color: white;
padding: 5px;
text-align: center;
}
.message-success {
background-color: green;
}
.message-error {
background-color: red;
}
.message-warning {
background-color: orange;
}
Podemos apreciar que Sass, agrupará las clases o atributos que tengan estilos comunes, evitando repetirlos por separado, haciendo uso del principio DRY (Don’t repeat yourself).
¡No abuses de los extends!
El problema con los Extends, es que al no usarlo adecuadamente podemos conseguir agrupar una gran cantidad de elementos (atributos, clases, entre otros) para un fragmento de código muy simple. Miren el siguiente ejemplo:
.main, .section, .page, .nav, p, form, input, label, html, body, h1, h2, h3, h4, h5, a, button, .btn, .btn-small, .btn-big, header, footer, nav {
float: left;
}
En la impresión de CSS generada por Sass, se puede apreciar que estamos flotando todos esos elementos a la izquierda. Es una mala práctica crear Extends para este tipo de cosas tan básicas y repetitivas. En estos casos podemos usar una clase helper directamente en el HTML, de la siguiente manera:
CSS
.pull-left {
float: left;
}
HTML
<footer class="pull-left">Pie de página</footer>
Recomendación en el uso de Extends en Sass:
Al momento de usar esta característica, debemos hacerlo con mucha precaución. Como ya vieron, el uso que les doy habitualmente es para estilos comunes dentro de un componente específico y no para estilos simples.
Una buena práctica para los Extends, es declararlos en la primera línea de nuestros componentes.
Mixins:
Nos permiten definir estilos que puedan ser reutilizados en nuestro proyecto, sin necesidad de recurrir a las clases helpers que ya comentamos, también pueden contener complejas reglas de CSS.
Si se fijan, los conceptos de Extends y Mixins son muy parecidos. Por ello, les comentaba que en un principio es posible confundirlos. Vamos a explicar dos diferencias entre ellos que son claves para un entendimiento más claro:
- Una de las mayores diferencias con los Extends, es que los Mixins pueden recibir argumentos, los cuales te permitirán producir una gran variedad de estilos con unas simples líneas.
- La impresión en CSS de los Mixins, no es la misma que tienen los Extends. Estos se imprimen separados en cada uno de los lugares donde fueron declarados.
Ya tenemos un poco más claro cuales son las diferencias entre estas importantes características de Sass. Recuerden, los Extends los usaremos para compartir fragmentos de estilos idénticos entre componentes y los Mixins para reutilizar fragmentos de estilos que puedan tener un resultado diferente en cada lugar donde los declaremos.
Cómo usar los Mixins en Sass:
Para crearlos debemos utilizar al signo de arroba (@) seguido de la palabra clave mixin y por último el nombre que queramos darle al mixin. Luego, para declararlo dentro de un componente, usamos la palabra clave @include, seguido de un espacio, el nombre y por último entre paréntesis () escribimos los argumentos requeridos por nuestro Mixin. Los argumentos son opcionales.
Veamos un ejemplo:
¿Cuantas veces declaras el alto y ancho de un componente a lo largo de un proyecto? para evitar esta repetición, podemos crear un pequeño Mixin que transforme las habituales dos líneas de código en una sola:
@mixin sizes($width, $height: $width) {
height: $height;
width: $width;
}
.box {
@include sizes(200px);
}
Muy sencillo y práctico, ahora podemos declarar el alto y ancho en una sola línea. En el ejemplo podemos apreciar que el Mixin creado recibe dos argumentos y el último es opcional, en caso de no estar presente en la declaración, tomará el valor del primer argumento.
Hagamos otro ejemplo un poco más complejo, supongamos que necesitamos declarar una transición básica en un elemento:
@mixin sizes($width, $height: $width) {
height: $height;
width: $width;
}
@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {
#{$property}: #{$value};
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: #{$value};
}
}
@mixin transition($value: .15s) {
@include prefixer(transition, $value);
}
.box {
background-color: red;
// declarando mixins
@include sizes(200px);
@include transition(0.4s);
&.active {
@include sizes(300px);
}
}
Vamos a explicarlo paso a paso:
Primeramente, reutilizamos el Mixin del primer ejemplo, para declarar el ancho y alto de la caja.
Seguidamente, la sección más compleja de nuestro segundo ejemplo, creamos dos Mixins que trabajan en conjunto:
- El primero, Prefixer. sirve para no escribir a mano todos los prefijos utilizados por cada uno de los motores de renderizado de los navegadores. Podemos pasarle como parámetro los prefijos que deseamos imprimir, sino pasamos ninguno, el Mixin imprimirá todos las opciones disponibles.
- El segundo, Transition. Nos servirá para generar una pequeña transición en nuestra caja, logrando que al cambiar su estado natural lo haga de una manera limpia y delicada.
Por último, declaramos los Mixins en el componente deseado y jugamos un poco con sus argumentos. El componente .box, tiene dos estados: normal y activo. Cuando el estado sea activo su tamaño aumentará 100px. Aquí podemos apreciar mejor el ejemplo.
Los Mixins deben ser declarados en la última línea de nuestros componentes, como hemos ido haciendo en ejemplos anteriores.
Conclusión:
Realizamos un repaso por las tres características principales que nos faltaban de Sass. La próxima semana voy hablarles sobre Funciones y el tipo de dato Map.
Ya contamos con un conocimiento medio de la herramienta, lo cual nos permite realizar un pequeño ejercicio para probar todo los conceptos que hemos ido desarrollando a lo largo de esta serie. ¿Se animan? Cuéntanos en los comentarios qué te gustaría hacer con Sass.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Aprende Sass: Características principales Lección siguiente Aprende Sass: Tipo de Dato Maps y Funciones