MENOS - Ampliar

Extend es una pseudoclase MENOS que extiende otros estilos de selector en un selector usando :extend selector.

Ejemplo

El siguiente ejemplo demuestra el uso de extender 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>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

estilo sin

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

Puede compilar el extend.less archivo a extend.css utilizando el comando siguiente -

lessc style.less style.css

Ejecute el comando anterior; creará el archivo style.css automáticamente con el siguiente código:

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

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.

Ampliar sintaxis

Extender se coloca en un conjunto de reglas o se adjunta a un selector. Es similar a una pseudoclase que contiene una o más clases, que están separadas por comas. Usando la palabra clave opcionalall, se puede seguir cada selector.

Ejemplo

El siguiente ejemplo demuestra el uso de la sintaxis de extensión 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>

Ahora cree el archivo style.less .

estilo sin

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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: 30px;
}

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.

La siguiente tabla enumera todos los tipos de sintaxis de extensión que puede usar en LESS -

No Señor.	Tipos y descripción
1	Extender adjunto al selector Extend está conectado a un selector que se parece a una pseudoclase con selector como parámetro.
2	Extender el conjunto de reglas internas los &:extend(selector) la sintaxis se puede colocar dentro del cuerpo del conjunto de reglas.
3	Ampliación de selectores anidados Los selectores anidados se combinan mediante el selector de extensión .
4	Coincidencia exacta con Extend Por defecto, extend busca la coincidencia exacta entre los selectores.
5	enésima expresión La forma de la enésima expresión es importante en extender; de lo contrario, trata al selector como diferente.
6	Ampliar "todo" Cuando la palabra clave todo se identifica por fin en elextend argumento entonces MENOS coincide con ese selector como parte de otro selector.
7	Interpolación del selector con extender los extend se puede conectar al selector interpolado.
8	Alcance / Extender dentro de @media Extend coincide con el selector solo que está presente dentro de la misma declaración de medios.
9	Detección de duplicaciones No puede detectar la duplicación de selectores.

A continuación se muestran los tipos de casos de uso para Extend

No Señor.	Tipos y descripción
1	Caso de uso clásico El caso de uso clásico se usa para evitar agregar la clase base en MENOS.
2	Reducir el tamaño de CSS Extender se usa para mover el selector hasta las propiedades que desea usar; esto ayuda a reducir el código generado por CSS.
3	Combinando estilos / una mezcla más avanzada Usando extender podemos combinar los mismos estilos de un selector particular en otro selector.

↰ Previous page Next page ↱