MENOS - enésima expresión

Descripción

La forma de la enésima expresión es importante en la extensión; de lo contrario, trata al selector como diferente. La enésima expresión1n+2 y n+2 son equivalentes pero extender trata esta expresión como diferente.

Por ejemplo, cree un archivo MENOS con el siguiente código:

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}
.child:extend(:nth-child(1n+2)){}

Cuando compilemos el código anterior en el símbolo del sistema, aparecerá un mensaje de error como se muestra a continuación.

Después de compilar, obtendrá el siguiente código CSS.

:nth-child(n+2) {
   color: #BF70A5;
   font-style: italic;
}

En el selector de atributos, el tipo de cotización no es importante como puede verlo en el siguiente ejemplo:

Ejemplo

El siguiente ejemplo demuestra el uso de la nth expresió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>Hello!!!!!</h2>
      </div>
      <p class = "img">Welcome to TutorialsPoint</p>
   </body>
</html>

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

estilo sin

[title = tutorialspoint] {
   font-style: italic;
}

[title = 'tutorialspoint'] {
   font-style: italic;
}

[title = "tutorialspoint"] {
   font-style: italic;
}
.style:extend([title = tutorialspoint]) {}
.container:extend([title = 'tutorialspoint']) {}
.img:extend([title = "tutorialspoint"]) {}

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

[title = tutorialspoint],
.style,
.container,
.img {
   font-style: italic;
}

[title = 'tutorialspoint'],
.style,
.container,
.img {
   font-style: italic;
}

[title = "tutorialspoint"],
.style,
.container,
.img {
   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