Estructuras de control (I). Condicionales.

Al igual que cualquier lenguaje de programación, SASS nos permite usar condicionales para flexibilizar el flujo de código, de forma que al transpilar a CSS podamos obtener los resultados deseados con toda precisión, pero con un código SASS original mucho más limpio y legible. Supongo que habrás observado que hago mucho hincapié, en estos artículos, en la legibilidad y la optimización del código. Eso es porque, para bien o para mal, tengo mucha experiencia en tener que refactorizar código no optimizado, mal diseñado y peor escrito. Recuerda que un conocimiento pequeño es una cosa peligrosa, y que una hora invertida en hacer un diseño correcto, conociendo las herramientas de las que disponemos, son diez horas ahorradas buscando errores y tratando de leer lo ilegible.

Al margen de este pequeño consejo, los condicionales en SASS se programan usando estructuras if...else (como en cualquier lenguaje, con la única salvedad de que SASS las trata como directivas (declarándolas con el signo @), y con su sintaxis específica, que tiene la ventaja de ser simple y clara.

EL ESCENARIO

Vamos a partir de un proyecto muy simple, con un archivo SASS que establece los colores de fondo y de borde para distintos selectores, mediante un mixin muy simple. Se llama sin_condicional.scss:

Como ves, el código es bastante pobre, en el sentido de que el mixin sólo se emplea para el color de fondo, y no se le saca todo el partido posible, pero nos viene muy bien para definir el escenario. Observa cómo se transpila a sin_condicional.css:

AÑADIENDO CONDICIONALES

Vamos a ver cómo podemos mejorar el mixin, de forma que el color del borde se determine en base al color de fondo. El listado se llama condicional_1.scss:

Observa las líneas resaltadas. Es una estructura condicional al estilo de las empleadas en cualquier lenguaje de programación, que determina el color del borde en función del color del fondo. Si haces la transpilación verás que obtienes, exactamente, el mismo resultado que en el caso anterior, sólo que ahora las definiciones de los selectores en SASS son mucho más compactas.

ATENCIÓN. Esta no es, quizá, la manera óptima de manejar colores en SASS, ya que este lenguaje ofrece varias funciones nativas para gestionar este tipo de datos. Ese es un tema del que hablaremos en un artículo posterior. De momento, a efectos didácticos, este ejemplo nos funciona perfectamente.

LAS DIRECTIVAS DE CONDICIONALES

En el ejemplo anterior has visto el uso de condicionales en toda su sintaxis. Lo único peculiar aquí es la sintaxis, en forma de directivas. El condicional básico, con la directiva @if, se ciñe a la siguiente sintaxis genérica:

@if condicion {
    // acciones a llevar a cabo si se cumple la condición.
}

Si lo prefieres, por familiaridad con los condicionales en otros lenguajes, la condición se puede especificar entre paréntesis, así:

@if (condicion) {
    // acciones a llevar a cabo si se cumple la condición.
}

Sin embargo, no es lo habitual en SASS. La mayoría de la gente omite los paréntesis.

Esta directiva se puede completar con las directivas @else if y @else, para evaluar varias condiciones excluyentes de forma sucesiva, o proporcionar una salida por defecto, como has visto en el código de ejemplo.

CONCLUYENDO

En este artículo has aprendido lo básico para el uso de condicionales. Estas estructuras se complementan en su funcionamiento con otras que nos permiten darle mayor flexibilidad, como iremos viendo. En los próximos artículos seguiremos analizando estructuras que nos permiten controlar el flujo, o acceder a distintos selectores. El código de este artículo lo tienes disponible en este enlace.

   

Deja un comentario