MENOS: ampliar "todo"

Descripción

Cuando la palabra clave todo se identifica por fin en elextendargumento, luego LESS coincide con ese selector como parte de otro selector. La parte del selector que está emparejada será reemplazada por extender, haciendo un nuevo selector.

Ejemplo

El siguiente ejemplo demuestra el uso de todas las palabras clave en el archivo LESS:

extend_all.htm

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

   <body>
      <div class = "container">
         <h3>Welcome to TutorialsPoint</h3>
         <div class = "style">
            <ul class="nav">
               <li>SASS </li>
               <li>LESS</li>
            </ul>
         </div>
      </div>
   </body>
</html>

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

estilo sin

.style.nav,
.nav h3 {
   color: orange;
}

.nav {
   &:hover {
      color: green;
   }
}
.container:extend(.nav all) {}

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

.style.nav,
.nav h3,
.style.container,
.container h3 {
   color: orange;
}

.nav:hover,
.container:hover {
   color: green;
}

Salida

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

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

↰ Previous page