MENOS - Mixin inside mixin

Descripción

Siempre que se defina un mixin dentro de otro mixin, también se puede utilizar como valor de retorno.

Ejemplo

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

<html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Mixin inside mixin</title>
   </head>

   <body>
      <h1>Welcome to Tutorialspoint</h1>
      <div class = "myclass">
         <p>LESS is a CSS pre-processor that enables customizable, 
         manageable and reusable style sheet for web site.</p>
      </div>
   </body>
</html>

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

estilo sin

.outerMixin(@value) {
   .nestedMixin() {
      font-size: @value;
   }
}

.myclass {
   .outerMixin(30);
   .nestedMixin();
}

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 {
   font-size: 30;
}

Salida

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

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

↰ Previous page