MENOS - Coincidencia de patrones

Descripción

Puede cambiar el comportamiento de mixin pasándole parámetros.

Considere un simple fragmento de código MENOS:

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

.line {
   .mixin(@color-new; #888);
}

Puede usar diferentes valores para @ color-new para realizar diferentes comportamientos de mezcla como se muestra en el código que se muestra a continuación.

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.line {
   .mixin(@color-new; #FF0000);
}

Si establece el valor de @ color-new en oscuro, el resultado se mostrará en un color más oscuro ya que la definición de mezcla coincide con la oscuridad como primer argumento.

Ejemplo

El siguiente ejemplo demuestra el uso de la coincidencia de patrones en el archivo LESS:

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

   <body>
      <h2>Example of Pattern Matching</h2>
      <p class = "myclass">Welcome to Tutorialspoint...</p>
   </body>
</html>

A continuación, cree el archivo style.less .

estilo sin

.mixin(dark; @color) {
   color: darken(@color, 15%);
}

.mixin(light; @color) {
   color: lighten(@color, 15%);
}

@color-new: dark;

.myclass {
   .mixin(@color-new; #FF0000);
}

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

.myclass {
   color: #b30000;
}

Salida

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

Guarde el código html anterior en el pattern-matching.html archivo.
Abra este archivo HTML en un navegador, se mostrará el siguiente resultado.

↰ Previous page