Articles
Introducción a SASS/SCSS
La función `if` en SASS

La función `if` en SASS

Este artículo explica la función if en SASS.

Recorreremos todo, desde lo básico de la función if hasta técnicas avanzadas, paso a paso.

YouTube Video

La función if en SASS

La función if() es una función condicional simple proporcionada por SASS que devuelve uno de dos valores según una condición booleana. Es similar al operador ternario de JavaScript.

Sintaxis

La sintaxis es la siguiente:.

1// if(condition, trueValue, falseValue)
  • Si condition es verdadera, devuelve trueValue; si es falsa, devuelve falseValue.

Uso básico

Por ejemplo, puedes usar la función if() para cambiar los colores de fondo y de texto según si el tema es oscuro o claro.

Código de Ejemplo 

1$theme: "dark";
2
3$background-color: if($theme == "dark", black, white);
4$text-color: if($theme == "dark", white, black);
5
6body {
7  background-color: $background-color;
8  color: $text-color;
9}
  • Si la variable $theme es "dark", el fondo se vuelve negro con texto blanco; si es "light", el fondo se vuelve blanco con texto negro.

El CSS generado 

1body {
2  background-color: black;
3  color: white;
4}
  • Como la variable $theme es "dark", el fondo es negro con texto blanco.

Diferencias entre la sentencia @if y la función if()

Sass proporciona una sentencia @if y una función if() para la ramificación condicional, pero se usan con fines distintos.

Código de Ejemplo 

 1$theme: "dark";
 2
 3// `@if` statement: Compile-time branching (syntax level)
 4$background-color: null;
 5@if $theme == "dark" {
 6  $background-color: black;
 7} @else if $theme == "light" {
 8  $background-color: white;
 9} @else {
10  $background-color: gray;
11}
12
13// `if()` function: Returns a value (expression level)
14$text-color: if($theme == "dark", white, black);
15
16body {
17  background-color: $background-color;
18  color: $text-color;
19}
  • La sentencia @if controla qué código se genera en tiempo de compilación de Sass.
  • En cambio, la función if() devuelve un valor y se usa para alternar valores dinámicamente dentro de las expresiones.

El CSS generado 

1body {
2  background-color: black;
3  color: white;
4}
  • En este ejemplo, dado que $theme es "dark", se aplica un fondo negro y un color de texto blanco.
  • Las dos diferencias principales son que la sentencia @if controla la estructura y la función if() devuelve un valor.

Uso de funciones if anidadas

Cuando necesitas ramificaciones complejas, puedes anidar funciones if.

Código de Ejemplo 

 1$theme: "custom";
 2$custom-color: blue;
 3
 4$background-color: if(
 5  $theme == "dark",
 6  black,
 7  if(
 8    $theme == "light",
 9    white,
10    $custom-color
11  )
12);
13
14body {
15  background-color: $background-color;
16}
  • Si $theme es "dark", devuelve negro; si es "light", devuelve blanco; de lo contrario, devuelve el valor predeterminado ($custom-color).

El CSS generado 

1body {
2  background-color: blue;
3}
  • Como la variable $theme es custom, el color de fondo es azul.

Casos de uso prácticos

Cambio de tema

A continuación, un ejemplo que cambia los estilos del botón según el tema.

1$theme: "dark";
2
3.button {
4  background-color: if($theme == "dark", #333, #fff);
5  color: if($theme == "dark", #fff, #333);
6  border: 1px solid if($theme == "dark", #444, #ccc);
7}
  • Este código es un ejemplo condicional en SASS que cambia los colores de fondo, texto y borde de un botón según el valor de la variable $theme. La función if() se usa para establecer dinámicamente estilos para temas claros y oscuros.

El CSS generado 

1.button {
2  background-color: #333;
3  color: #fff;
4  border: 1px solid #444;
5}
  • Al cambiar el tema, puedes modificar de forma uniforme el diseño general.

Ejemplo avanzado: establecer dinámicamente el contraste de color

Veamos un ejemplo que establece automáticamente el color del texto según el color de fondo.

Código de Ejemplo 

 1@use "sass:color";
 2
 3$background-color: #000;
 4
 5$text-color: if(
 6  color.channel($background-color, "lightness", $space: hsl) > 50%,
 7  black,
 8  white
 9);
10
11body {
12  background-color: $background-color;
13  color: $text-color;
14}
  • La función color.channel() se utiliza para obtener la luminosidad del color de fondo (lightness). Si ese valor es mayor que 50%, se elige el negro; si es menor, se elige el blanco como color de texto, optimizando automáticamente el contraste con el fondo.

El CSS generado 

1body {
2  background-color: #000;
3  color: white;
4}
  • Al usar la función if(), puedes implementar estilos flexibles que tengan en cuenta la accesibilidad del diseño, como ajustar el contraste.

Combinación con @function

Usar la función if dentro de una @function permite un diseño de estilos aún más flexible.

Código de Ejemplo 

 1@function theme-color($theme, $type) {
 2  @return if(
 3    $theme == "dark",
 4    if(
 5      $type == "background",
 6      black,
 7      white
 8    ),
 9    if(
10      $type == "background",
11      white,
12      black
13    )
14  );
15}
16
17body {
18  background-color: theme-color("dark", "background");
19  color: theme-color("dark", "text");
20}
  • Este código muestra el uso de if() dentro de una @function para devolver colores apropiados según el tema y el tipo de color. Esto permite un diseño de estilos coherente y reutilizable para cada tema.

El CSS generado 

1body {
2  background-color: black;
3  color: white;
4}
  • Al crear y usar funciones auxiliares que aprovechan la función if(), puedes mejorar la mantenibilidad de todo el proyecto.

Notas

  1. La función if no se puede usar con valores dinámicos Debido a que CSS en sí es un lenguaje estático, la función if determina los valores en el momento en que SASS se compila. Para lógica condicional en tiempo de ejecución, necesitas usar JavaScript.

  2. Prioriza la legibilidad Dado que las funciones if anidadas pueden volverse complejas y perjudicar la legibilidad, puedes usar los @mixin y @function de SASS según sea necesario para organizar tu código.

Conclusión

La función if de SASS es una herramienta potente que devuelve valores distintos según las condiciones. Es útil no solo para condicionales simples, sino también en muchos escenarios como el cambio de tema y la configuración dinámica de estilos. Sin embargo, al tratar con condiciones complejas, presta atención a la legibilidad y aprovecha @mixin y @function para mejorar la mantenibilidad.

Al dominar la función if, puedes lograr un diseño de estilos más eficiente y flexible.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Condicionales en SASS