Podemos definir muy fácilmente reglas anidadas en LESS. Las reglas anidadas se definen como un conjunto de propiedades CSS que permiten que las propiedades de una clase se usen para otra clase y contienen el nombre de la clase como su propiedad. En LESS, puede usar selectores de clase o ID para declarar mixin de la misma manera que los estilos CSS. Puede almacenar varios valores y se puede reutilizar en el código según sea necesario.
Uno debe haber escuchado la palabra anidado probablemente refiriéndose a las tablas anidadas en los sitios web de diseño de tablas antiguas. Con LESS, básicamente estamos haciendo el mismo concepto, pero anidando reglas LESS dentro de otras reglas. Los siguientes ejemplos demostrarán este concepto de anidamiento en LESS.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <h1>Example of less</h1> <p>We will discuss LESS here.</p> <div class="MyClass"> <h1>Geeks for Geeks portal</h1> <p> Nested rules are clever about handling selector lists </p> </div> </div> </body> </html>
A continuación, crearemos el archivo style.less .
.container {
h1 {
font-size: 24px;
color: red;
}
p {
font-size: 24px;
color: blue;
}
.myclass {
h1 {
font-size: 24px;
color:red;
}
p {
font-size: 24px;
color:blue;
}
}
}
Podemos compilar el archivo style.less a style.css usando el siguiente comando.
lessc style.less style.css
Después de ejecutar el comando anterior, el archivo style.css se crea con el siguiente código.
.container h1 {
font-size: 24px;
color: red;
}
.container p {
font-size: 24px;
color: blue;
}
.container .MyClass h1 {
font-size: 24px;
color: red;
}
.container .MyClass p {
font-size: 24px;
color: blue;
}
Producción:
Ejemplo 2: En este ejemplo, usaremos el archivo LESS JavaScript que hará que el navegador compile automáticamente el código LESS en CSS. Sin embargo, no se recomienda utilizar esto en producción, ya que podría afectar el rendimiento del sitio web.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet/less" type="text/css" href="style.less" /> <script type="text/javascript" src= "https://cdn.jsdelivr.net/npm/less@3.13"> </script> </head> <body> <div class="Important"> <div class="Different"> GeeksforGeeks </div> <div class="Nestedrules"> LESS Nesting example! </div> </div> </body> </html>
A continuación, crearemos el archivo style.less .
.Important {
color: green;
.Different {
font-size: 40px;;
}
.Nestedrules {
font-size: 20px;
}
}
El navegador compilará automáticamente el código LESS en CSS y la página resultante se podrá ver en el navegador. El CSS compilado final sería como el siguiente.
.Important {
color: green;
}
.Important .Different {
font-size: 40px;
}
.Important .Nestedrules {
font-size: 20px;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por jyotics038 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA