Condicionales en Preprocesadores CSS

¿Qué son las Condicionales?

Al igual que en la programación, los preprocesadores CSS como Sass y Less te permiten usar directivas condicionales (@if, @else if, @else en Sass y if en Less) para aplicar estilos basados en el valor de variables o expresiones booleanas. Esto te permite crear estilos dinámicos y adaptables.

¿Por qué usar condicionales?

Las condicionales te ayudan a:

Aplicar diferentes estilos según el valor de una variable (ej., tema claro u oscuro).

Crear estilos basados en breakpoints o características del dispositivo.

Definir estilos alternativos para diferentes estados (ej., activo, inactivo).

Implementar lógica de estilo compleja directamente en tu CSS.

Condicionales en Sass (@if, @else if, @else)

Sass proporciona las directivas @if, @else if y @else para controlar qué bloques de estilo se aplican.

Sass (Ejemplo de tema)

$theme: 'dark';

.container {
  padding: 1rem;
  @if $theme == 'dark' {
    background-color: var(--fondo);
    color: var(--texto);
    border: 1px solid var(--card-borde);
  } @else if $theme == 'light' {
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #ccc;
  } @else {
    background-color: lightblue;
    color: darkblue;
    border: 1px solid blue;
  }
}

Condicionales en Less (if)

Less utiliza la función if() para lograr un comportamiento condicional en la asignación de valores.

Less (Ejemplo de tema)

@theme: 'dark';

.container {
  padding: 1rem;
  background-color: if(@theme == 'dark', @fondo, if(@theme == 'light', #f9f9f9, lightblue));
  color: if(@theme == 'dark', @texto, if(@theme == 'light', #333, darkblue));
  border: 1px solid if(@theme == 'dark', @card-borde, if(@theme == 'light', #ccc, blue));
}

Combinando Condicionales con Operadores

Puedes combinar operadores lógicos (and, or, not en Sass) con condicionales para crear expresiones más complejas.

Sass (Ejemplo con operadores lógicos)

$is-large: true;
$is-dark-theme: true;

.button {
  padding: 1rem 1.5rem;
  color: white;
  @if $is-large and $is-dark-theme {
    background-color: darken(var(--fondo), 20%);
    font-size: 1.2rem;
  } @else if $is-large and not $is-dark-theme {
    background-color: lighten(lightblue, 10%);
    font-size: 1.2rem;
  } @else {
    background-color: var(--azul);
    font-size: 1rem;
  }
}

Consideraciones al Usar Condicionales

Utiliza condicionales para adaptar estilos basados en variables semánticas (ej., $theme, $is-mobile).

Evita anidar demasiadas condicionales, ya que puede dificultar la lectura del código. Considera usar funciones o mixins para lógica más compleja.

Prueba tus estilos en diferentes escenarios para asegurarte de que las condicionales funcionan como esperas.

Conclusión

Las condicionales en los preprocesadores CSS te permiten llevar la lógica directamente a tus estilos, creando componentes más flexibles y adaptables. Al controlar qué estilos se aplican según ciertas condiciones, puedes construir interfaces de usuario más dinámicas y fáciles de mantener.

Condicionales en Preprocesadores CSS: Estilos Dinámicos