Combinando estilos / una mezcla más avanzada

Descripción

Utilizando Extend, podemos combinar los mismos estilos de un selector en particular en otro selector.

Ejemplo

El siguiente ejemplo describe el uso de la combinación de estilos mixin en el archivo LESS -

extend_syntax.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
         <ul class = "nav">
            <li>HTML</li>
            <li>SASS</li>
            <li>LESS</li>
         </ul>
      </div>
   </body>
</html>

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

estilo sin

ul.nav > li {
   background-color: #6DE6E6;
   color: black;
}

.cont {
   &:extend(ul.nav > li);
}

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

ul.nav > li,
.cont {
   background-color: #6DE6E6;
   color: black;
}

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