MENOS: extensión adjunta al selector

Descripción

Extendestá conectado a un selector que se parece a una pseudoclase con selector como parámetro. Cuando el conjunto de reglas tiene muchos selectores, la extensión de la palabra clave se puede aplicar en cualquiera de los selectores. El siguiente formato se puede utilizar para definir la extensión en el código.

Extender después del selector [Ej .: pre: hover: extender (div pre) ]
Permite espacio entre el selector y la extensión [Ej .: pre: hover: extend (div pre) ]
Permite múltiples extensiones [por ejemplo: pre: hover: extend (div pre): extend (.bucket tr) o pre: hover: extend (div pre, .bucket tr) ]
Extender debe definirse al final del selector. pre: hover: extend (div pre) .nth-child (impar) tipo no está permitido.

Ejemplo

El siguiente ejemplo demuestra el uso de extender adjunto al selector en el archivo LESS:

extend_syntax.htm

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

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

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

estilo sin

.style,
.container{
   background: #BF70A5;
}

.img,
.container{
   font-size: 45px;
   font-style: italic;
}

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 {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 45px;
}

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