Condicionales en SASS

Este artículo explica los condicionales en SASS.

Explicamos claramente todo, desde lo básico hasta usos avanzados de los condicionales con las directivas @if, @else if y @else, con ejemplos prácticos.

YouTube Video

Condicionales en SASS

SASS es un lenguaje de hojas de estilo que extiende CSS, y puedes controlar los estilos de forma flexible usando condicionales. En SASS, puedes usar @if, @else if y @else para cambiar la salida de estilos en tiempo de compilación.

Sintaxis básica de condicionales

Los condicionales básicos en SASS se escriben con la siguiente sintaxis.

1@if condition {
2  // Code executed when the condition is true
3} @else if condition {
4  // Code executed when another condition is true
5} @else {
6  // Code executed when all conditions are false
7}

• @if evalúa la primera condición y, si es falsa, se evalúan en orden los bloques @else if o @else.

Ejemplo simple de condicional

En el siguiente ejemplo, el color de fondo cambia según la variable $theme.

 1$theme: "dark";
 2
 3body {
 4  @if $theme == "dark" {
 5    background-color: #333;
 6    color: #fff;
 7  } @else if $theme == "light" {
 8    background-color: #fff;
 9    color: #000;
10  } @else {
11    background-color: #f0f0f0;
12    color: #333;
13  }
14}

CSS compilado

1body {
2  background-color: #333;
3  color: #fff;
4}

• Cuando $theme es "dark", se aplican un fondo oscuro y un color de texto blanco.

Combinando condicionales con cálculos

Los condicionales manejan no solo comparaciones de cadenas y colores, sino también cálculos numéricos.

1$width: 1200px;
2
3.container {
4  @if $width > 1000px {
5    max-width: 1200px;
6  } @else {
7    max-width: 800px;
8  }
9}

CSS compilado

1.container {
2  max-width: 1200px;
3}

• También son posibles comparaciones numéricas y, cuando $width supera 1000px, se genera max-width: 1200px.

Condicionales anidados

Al anidar condicionales, puedes expresar condiciones complejas.

 1$theme: "dark";
 2$size: "large";
 3
 4button {
 5  @if $theme == "dark" {
 6    background-color: #000;
 7    color: #fff;
 8
 9    @if $size == "large" {
10      padding: 20px;
11    } @else {
12      padding: 10px;
13    }
14  } @else {
15    background-color: #fff;
16    color: #000;
17
18    @if $size == "large" {
19      padding: 15px;
20    } @else {
21      padding: 8px;
22    }
23  }
24}

CSS compilado

1button {
2  background-color: #000;
3  color: #fff;
4  padding: 20px;
5}

• La anidación de condicionales permite aplicar estilos en función tanto del tema como del tamaño.

Uso de condicionales en funciones personalizadas

Usar condicionales dentro de funciones personalizadas puede mejorar la reutilización.

 1@function adjust-color($theme) {
 2  @if $theme == "dark" {
 3    @return #333;
 4  } @else if $theme == "light" {
 5    @return #fff;
 6  } @else {
 7    @return #ccc;
 8  }
 9}
10
11.card {
12  background-color: adjust-color("dark");
13}

CSS compilado

1.card {
2  background-color: #333;
3}

• Al encapsular condicionales en funciones, puedes aumentar la reutilización y la mantenibilidad.

Ejemplo práctico - Alternar diseños

Veamos un ejemplo de cómo cambiar el diseño general según ciertas condiciones.

 1$theme: "light";
 2
 3body {
 4  font-family: Arial, sans-serif;
 5
 6  @if $theme == "dark" {
 7    background-color: #121212;
 8    color: #e0e0e0;
 9  } @else if $theme == "light" {
10    background-color: #f9f9f9;
11    color: #333;
12  } @else {
13    background-color: #fff;
14    color: #000;
15  }
16}
17
18header {
19  @if $theme == "dark" {
20    border-bottom: 1px solid #333;
21  } @else {
22    border-bottom: 1px solid #ccc;
23  }
24}

CSS compilado

1body {
2  font-family: Arial, sans-serif;
3  background-color: #f9f9f9;
4  color: #333;
5}
6
7header {
8  border-bottom: 1px solid #ccc;
9}

• Puedes alternar dinámicamente el esquema de colores de toda la página según la variable de tema.

Notas y buenas prácticas

Al usar condicionales en SASS, puedes considerar los siguientes puntos.

1. Mantén los condicionales simples

   La anidación compleja perjudica la legibilidad, por lo que aprovechar funciones y mixins ayuda a mantener las cosas simples.

2. Abstrae con variables y funciones

   Si usas condiciones similares en varios lugares, consolidarlas en variables o funciones mejora la mantenibilidad.

3. Evita la lógica excesiva

   Unifica las reglas de diseño tanto como sea posible y evita el uso excesivo de condicionales.

Conclusión

Los condicionales en SASS son una herramienta muy efectiva para crear estilos flexibles y dinámicos. Aquí explicamos todo paso a paso, desde lo básico hasta ejemplos prácticos. Al usar condicionales en proyectos reales, diseña pensando en código reutilizable y procurando no complicar en exceso las cosas.

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