MENOS - Interpolación del selector con Extend

Descripción

los @{variable} El símbolo se utiliza como parte del nombre de la variable, id y nombre de clase. Extendno tiene la capacidad de hacer coincidir el selector con variables. Extend se puede conectar al selector interpolado.

Ejemplo

El siguiente ejemplo demuestra el uso de la interpolación del selector con extender en el archivo LESS:

extend_syntax.htm

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

   <body>
      <h2 class = "style">This is a simple example of Selector Interpolation</h2>
      <p class = "style">This is a simple example of Selector Interpolation</p>
   </body>
</html>

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

estilo sin

.style {
   color: #BF70A5;
   font-style: italic;
}
@{variable}:extend(.style) {}
@variable: .selector;

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,
.selector {
   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