¿Cómo agregar una clase si la condición es verdadera en Haml?

Veremos dos formas de agregar una clase a un elemento dependiendo de la evaluación de alguna condición. Esencialmente, la lógica detrás de ambos es la misma.

• Usando el operador ternario
• Uso de la verificación condicional «a menos que»

Código inicial: Primero, escribamos algo de código HAML básico. Contendrá un elemento de estilo en la sección principal . El elemento de estilo contendrá todos los estilos definidos para las clases. Inicialmente, hay un elemento de anclaje en la sección del cuerpo y tiene una clase «agregar fondo». El estilo definido para esta clase en el elemento de estilo dará un fondo gris claro al texto del elemento ancla.

• Programa:

  %head      %title Appending class based on condition evaluation         -# defining styles for the classes     %style         /.add-background{ background-color: lightgrey; }     %body     -# an anchor element with class "add-background"     %a{ :class => "add-background" } Geeks for Geeks

• Producción:

Método 1: supongamos que tenemos una clase llamada «make-red» para agregar. El estilo definido para esta clase en el styleelemento es tal que cambiará el color del texto a rojo. Esta clase solo se agregará al «agregar fondo» ya existente si alguna condición se evalúa como verdadera.
Tomemos una variable booleana «bandera». La clase «make-red» se agregará solo si el valor de «flag» es verdadero; de lo contrario, no.

• Programa:

  %head      %title Appending class based on condition evaluation        -# defining styles for the classes     %style         /.add-background{ background-color: lightgrey; }         /.make-red{ color: red; }    %body     -# declaring local boolean type variable      - flag = true            -# using ternary operator to append class to the anchor element     -# if "flag" is true, "make-red" class is appended     -# else nothing is appended     %a{ :class => "add-background" + ((flag == true) ? " make-red" : "") }      GeeksforGeeks

• Producción:

Método 2: usar la verificación condicional «a menos que». Este tipo de verificación asegura que una determinada operación se realice siempre que alguna condición no sea cierta. Entonces, como se demuestra a continuación, en este caso, la clase «make-red» se agregará si «flag» es falso y no se evalúa como verdadero. Es decir, si «bandera» es falsa, la clase no se agregará o se agregará.

• Programa:

  %head      %title Appending class based on condition evaluation        -# defining styles for the classes     %style         /.add-background{ background-color: lightgrey; }         /.make-red{ color: red; }    %body     -# declaring local boolean type variable      - flag = true            -# using the "unless" conditional check to append class to the anchor element     -# if the "flag" is true, "make-red" class is appended     -# else nothing is appended     %a{ :class => "add-background" + (" make-red" unless (flag == false)) }      Geeks for Geeks

• Producción: