MENOS - Guardias Mixin

Descripción

Si desea hacer coincidir valores simples o un número de argumentos en expresiones, puede hacer uso de guardias. Está asociado con la declaración de mixin e incluye la condición que se adjunta a un mixin. Cada mixin tendrá uno o más guardias separados por comas; un guardia debe estar entre paréntesis. MENOS usa mixins protegidos en lugar deif/else declaraciones y realiza cálculos para especificar la combinación combinada.

La siguiente tabla describe los diferentes tipos de protectores mixins junto con una descripción.

No Señor. Tipos y descripción
1 Operadores de comparación de guardias

Puede utilizar el operador de comparación (=) para comparar números, cadenas, identificadores, etc.
2 Operadores lógicos de guardia

Puede utilizar la palabra clave y para evitar operadores lógicos con guardias.
3 Funciones de verificación de tipo

Contiene las funciones integradas para determinar los tipos de valor para los mixins coincidentes.
4 Mixins condicionales

MENOS utiliza la función predeterminada para combinar la mezcla con otras combinaciones de mezcla.

Ejemplo

El siguiente ejemplo demuestra el uso de protectores mixin en el archivo LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Ahora, cree el archivo style.less .

estilo sin

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Puede compilar style.less en style.css usando el siguiente comando:

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Salida

Siga estos pasos para ver cómo funciona el código anterior:

  • Guarde el código html anterior en el mixin-guard.html archivo.

  • Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.