LESS (significa Leaner Style Sheets) es una extensión compatible con versiones anteriores de CSS. LESS es un preprocesador de CSS que le permite personalizar, organizar y utilizar las hojas de estilo de la página web. Less es un lenguaje de hoja de estilo dinámico que se puede ejecutar en el lado del cliente o en el lado del servidor. Less viene con compatibilidad entre navegadores y es un lenguaje de código abierto.
El compilador LESS está escrito en JavaScript. El compilador convierte el código LESS en CSS cuando el navegador carga la página web. Podemos simplemente incluirlo en nuestras páginas web junto con nuestra hoja de estilo LESS.
Los espacios de nombres se proporcionan en LESS para categorizar diferentes mixins en un solo grupo, es decir, estos se utilizan para agrupar mixins bajo un nombre común. Se utilizan principalmente para escenarios como si queremos crear diferentes mixins con el mismo nombre para diferentes propósitos que pueden generar muchos conflictos en el nombre, por lo que al colocarlos dentro de sus propios espacios de nombres específicos, se puede eliminar el conflicto.
Ejemplo 1: La siguiente es una implementación de espacios de nombres y accesores en LESS. El archivo HTML será:
HTML
<!DOCTYPE html> <html> <head> <title>Namespaces and Accessors in LESS</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>Namespaces and Accessors in LESS</h1> <p class="myclass">LESS provides customizable, and reusable stylesheet for website.</p> </body> </html>
styles.less
.classA {
.classB {
.val(@param) {
font-size: @param;
color: blue;
}
}
}
.myclass {
.classA > .classB > .val(10px);
}
Al ejecutar el comando anterior; crea el archivo styles.css automáticamente con el siguiente código proporcionado:
CSS
.myclass {
font-size: 10px;
color: blue;
}
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title> GFG tutorial on LESS Features</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>GFG tutorial on LESS Features</h1> <p class="colour-border"> Example of using Namespaces in LESS .</p> </body> </html>
styles.less
.colour-border {
border: 1px solid #00ff00;
background-color: ##8fbc8f;
border-radius: 5px;
padding: 20px;
.rounded-box-inner {
border: 1px solid #00ff00;
.rounded-box-inner {
padding: 20px;
}
}
}
El archivo CSS compilado:
CSS
.colour-border {
border: 1px solid #00ff00;
background-color: #8fbc8f;
border-radius: 5px;
padding: 20px;
}
.colour-border .rounded-box-inner {
border: 1px solid #00ff00;
}
.colour-border .rounded-box-inner
.rounded-box-inner {
padding: 20px;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por hemantrathore2705 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA