MENOS - Mixins con múltiples parámetros

Descripción

Los parámetros se pueden separar mediante comas o punto y coma . Usando el símbolo de coma, puede interpretarlo como un separador de parámetros mixin o un separador de listas CSS. Si usa punto y coma dentro de mixin, entonces separa los argumentos por punto y coma y las listas CSS tendrán todas las comas.

Incluye algunos puntos en punto y coma y comas que se enumeran a continuación:

Si tiene dos argumentos, los argumentos contendrán una lista separada por comas. Por ejemplo,.class1(1, 2, 3; sometext, other thing).
Si hay tres argumentos, los argumentos incluirán solo números como .class1(1, 2, 3).
Puede usar un punto y coma ficticio con una lista separada por comas como .class1(1, 2, 3;).
Hay un valor predeterminado separado por comas. Por ejemplo.class1(@color: gray, green;)

Sintaxis

.mixin_name(@var_name1; @var_name2:some) {
   //code here
}

Ejemplo

El siguiente ejemplo demuestra el uso de la combinación de varios parámetros en el archivo LESS:

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

   <body>
      <h2>Example of Mixin Multiple Parameters</h2>
      <p class = "myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

estilo sin

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

.mixin(@color; @padding: 2) {
   color: @color;
   padding: @padding;
}

.myclass {
   .mixin(#FE9A2E);
}

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: #FE9A2E;
   padding: 2;
}

Salida

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

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

↰ Previous page