Operadores SASS: qué son y cómo utilizarlos en nuestro día a día

SASS es uno de los preprocesadores CSS más conocidos actualmente. Cuenta con múltiples funcionalidades como mixins, variables, funciones, herencia, testing… En el artículo de hoy vamos a repasar una de sus principales características: operadores SASS.

Hoy en día, el uso de un preprocesador CSS es indispensable para cualquier desarrollo web, por la facilidad y versatilidad que nos ofrece a los desarrolladores, convirtiendo CSS en un lenguaje más dinámico. Además, una de las características que resultan de interés son los operadores. Vamos a contar en qué consisten y cómo los podemos utilizar.

El operador de asignación

Para empezar, los dos puntos : son el operador de asignación. Se usan para definir y asignar valores a variables. Veamos un ejemplo:

    $color:  #80DEEA;

Operadores aritméticos

Estos son los operadores aritméticos:

Operador	Descripción
+	Adición
–	Sustración
/	División
*	Multiplicación
%	Módulo

Estos operadores funciona de igual forma que en la aritmética normal. A continuación vamos a ver ejemplos sobre cómo usarlos, comenzando por la suma y la resta.

Suma y resta

Las siguientes operaciones serían válidas:

div {
     /* Suma */
     width: 3em + 6;
     font-size: 16px + 2;

     /* Resta */
     padding: 2em - 1;
     height: 20% - 6;
}

Por lo tanto, esto se compilaría a:

div {
     /* Suma */
     width: 9em;
     font-size: 18px;

     /* Resta */
     padding: 1em;
     height: 14%;
}

Debemos tener en cuenta que los valores deben tener las mismas unidades, o al menos que uno tenga indicada la unidad (en este caso, el valor con la unidad debe estar el primero, a la izquierda). Si utilizamos unidades diferentes, obtendremos el siguiente resultado:

div {
     height: 45% - 6px; // Error: Incompatible units: 'px' and '%'.
     font-size:  16px + 1em; // Error: Incompatible units: 'em' and 'px'.
}

Como podemos ver, tendremos un error en ambos casos.
No solo podemos sumar y restar unidades como píxeles o porcentajes, también podemos operar con colores. Veamos un ejemplo:

$negro: #212121;

div {
     background-color: $negro + #607D8B;
     color: $negro - #101010;
}

Esto se compilaría a:

div {
     background-color: #819EAC;
     color: #111111;
}

¿Cómo funciona? SASS realiza las operaciones separando cada parte correspondiente del color RGB. Como consecuencia, en el caso de la resta se realizaría la siguiente operación:

21 - 11 = 11 (Rojo)
21 - 11 = 11 (Azul)
21 - 11 = 11 (Verde)

Si agregamos dos valores, y se obtiene un valor mayor al rango de color, el resultado será el último valor del rango de color, que es #FFFFFF. De igual forma, si restamos más que el rango de color, el resultado será #000000. Por otra parte, estos operadores también los podemos utilizar para concatenar.

Multiplicación

En SASS, este operador se utiliza de la misma forma que la suma y la resta, solo que uno de los valores no debe tener unidad. Siguiendo esto, el siguiente código sería válido:

div {
     font-size: 10px * 3;
}

Y el resultado sería:

div {
     font-size: 30px;
}

No obstante, el siguiente daría un error:

div {
     font-size: 10px * 3px; // Error: 64px*px isn't a valid CSS value.
}

División

Si utilizamos el operador de división / sin poner los valores entre paréntesis, se utilizará con el uso normal de /, y no se realizará ninguna operación. Miremos este ejemplo:

div {
     font-size: 18px / 6px;
}

Por lo tanto, se compilará a:

div {
     font-size: 18px / 6px;
}

En este caso, será interpretado como:

div {
     font-size: 18px;
     line-height: 6px;
}

No realiza la operación porque lo toma como CSS normal. Por ello, si queremos que se efectúe la división, tendremos que poner los valores entre paréntesis.

div {
     font-size: (18px / 6px);
}

Y esto se compilará a:

div {
     font-size: 3px;
}

Tenemos que tener en cuenta que si utilizamos / sin paréntesis, podremos poner ambos valores con distintas unidades, ya que no se va a realizar una operación aritmética entre ellos. Sin embargo, cuando están entre paréntesis, los dos tendrán que tener la misma unidad, o uno de ellos deberá estar sin unidad.
A continuación, veamos el siguiente tipo de operador, el de concatenación.

Concatenación

El operador +, además de utilizarlo para sumar, sirve también para concatenar. No obstante, debemos tener algunas cosas en cuenta:

1. Si una cadena con comillas viene antes de una sin comillas, se citará la cadena resultante.
2. Por otro lado, si una cadena sin comillas viene antes de una con comillas, el resultado es una cadena sin comillas.

Veamos esto de una forma más clara, con un ejemplo:

div:before {
     content: "Soy un String con " + comillas;
     font-family: Arial + ", sans serif";
}

Finalmente, esto se compilará a:

div:before {
     content: "Soy un String con comillas";
     font-family: Arial, sans serif;
}

Cuando se usan mixins, esto es bastante interesante. Aquí, tenemos otro ejemplo:

@mixin saludo($name) {
     &:before {
          content: "¡Hola! Mi nombre es " +$name;
     }
} 

p {
     @include saludo(Sonia);
}

Esto se compilará a:

p:before {
     content: "¡Hola! Mi nombre es Sonia";
}

A continuación, veamos otro operador SASS, los de comparación.

Operadores de comparación

Existen operadores que se pueden usar para comparar valores en SASS. Son:

Operador	Condiciones	Descripción
==	x == y	Devuelve true si x e y son iguales
! =	x! = y	Devuelve true si x e y no son iguales
>	x > y	Devuelve true si x es mayor que y
<	x < y	Devuelve true si x es menor que y
> =	x >= y	Devuelve true si x es mayor o igual a y
<=	x <= y	Devuelve true si x es menor o igual a y

Por lo general, esta comparación se puede utilizar para ayudar a SASS a tomar decisiones. Por ejemplo:

@mixin espacio($padding, $margin)  { 
     @if  ($padding > $margin)  { 
          padding: $padding; 
     } @else { 
          padding: $margin; 
     }   
}

div { 
     @include espacio(15px, 30px); 
}

Una vez compilado, el resultado será:

div {
     padding: 30px;
}

En el ejemplo anterior, usamos el operador > para comprobar si el padding dado es mayor que el margin. Por lo tanto, el padding se establecerá en función del valor que devuelva. También se pueden usar los otros operadores de comparación de la misma manera.
Finalmente, veamos los últimos operadores SASS que vamos a tratar en este artículo.

Operadores lógicos

Los operadores lógicos son:

Operador	Condiciones	Descripción
and	x and y	Devuelve true si x e y son true
or	x or y	Devuelve true si x o y son true
not	not x	Devuelve true si x no es true

Vamos a usar un ejemplo para explicar cómo se pueden utilizar. Utilizaremos un operador lógico para decidir qué color de fondo se aplicará a un botón.

@mixin color-boton($height, $width) {
     @if(($height < $width) and ($width >= 45px)) {
          background-color: red;
     } @else {
          background-color: blue;
     }       
}

button {
     @include color-boton(30px, 40px)
}

Esto se compilará a:

button {
     background-color: blue;
}

El color de fondo se establece a blue porque ambas condiciones no se cumplen. Si en lugar de and se hubiera utilizado or, se habría establecido a red porque se cumpliría una de las condiciones.