MENOS - Ampliar el conjunto de reglas internas

Descripción

los &:extend(selector)la sintaxis se puede colocar dentro del cuerpo del conjunto de reglas. Es un atajo de colocar extender en cada selector del conjunto de reglas.

Ejemplo

El siguiente ejemplo demuestra el uso de extender dentro del conjunto de reglas en el archivo LESS:

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h1>Welcome to TutorialsPoint</h1>
         <div class = "container">
            <h2>Hello!!!!!</h2>
         </div>
      </div>
   </body>
</html>

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

estilo sin

.container,
.style {
   &:extend(.img);
}

.img{
   font-style: italic;
   background-color: #7B68EE;
}

Puede compilar el archivo 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

.img,
.container,
.style {
   font-style: italic;
   background-color: #7B68EE;
}

Salida

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

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

↰ Previous page