MENOS - Coincidencia exacta con Extend

Descripción

Por defecto, el extendbusque la coincidencia exacta entre los selectores. La extensión no importa cuando se trata de dos enésimas expresiones que tienen el mismo significado, pero solo busca el mismo formulario de orden definido para que el selector coincida.

Ejemplo

El siguiente ejemplo demuestra el uso de la coincidencia exacta con extend en el archivo LESS -

extend_syntax.htm

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

   <body>
      <div class = "style">
         <h3>Hello!!!!!</h3>
      </div>
      <h4 class = "img">Welcome to TutorialsPoint</h4>
   </body>
</html>

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

estilo sin

.style h3,
h3.style {
   color: #BF70A5;
   font-style: italic;
}
.img:extend(.style h3){}

El .style h3 debe definirse de la misma manera en extender como se define para selector. Si define en extender como .style , extender trata esto como diferente.

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 h3,
h3.style,
.img {
   color: #BF70A5;
   font-style: italic;
}

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