LESS (que significa Leaner Style Sheets) es una extensión de lenguaje compatible con versiones anteriores para CSS. CSS en sí mismo es excelente para definir estilos y aplicarlos a varios elementos HTML, pero tiene algunas limitaciones.
Limitaciones de CSS:
- Escribir código CSS se vuelve agotador, especialmente en grandes proyectos.
- Mantener el código CSS es difícil debido a la falta de funciones similares a la programación, como definir variables, anidar selectores, expresiones y funciones.
Hay varios preprocesadores de CSS que intentan abordar algunas de estas deficiencias al admitir muchas funciones. MENOS es uno de ellos. Tiene adiciones como variables, mixins, operaciones y funciones. Ayudan a que el código sea más limpio y fácil de mantener.
Creación y almacenamiento de un archivo LESS:
Paso 1: Vaya a la carpeta de su proyecto, cree una subcarpeta llamada CSS y luego cree un archivo llamado styles.less dentro de ella.
Paso 2: agregue el siguiente código al archivo recién creado y guárdelo:
styles.less
@green-color: #25C75C;
@light-color: #ebebeb;
@background-dark: #2b2b2b;
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
margin: 25px;
background: @background-dark;
color: @light-color;
}
h1 {
color: @green-color;
}
a {
color: @green-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
Compilar el archivo LESS
Paso 1: Vaya al directorio del proyecto en su terminal y escriba el siguiente comando:
npm install less
Paso 2: puede verificar si el compilador se ha instalado utilizando el siguiente comando:
lessc -v
Paso 3: muévase a la subcarpeta css (o la carpeta donde se almacena el archivo menos)
cd css
Paso 4: Escribe el siguiente comando:
lessc styles.less styles.css
Se creará un nuevo archivo llamado styles.css con el siguiente contenido:
styles.css
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
margin: 25px;
background: #2b2b2b;
color: #ebebeb;
}
h1 {
color: #25C75C;
}
a {
color: #25C75C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Paso 5: Ahora, puede vincular este archivo CSS a su archivo HTML.
gfg.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./css/styles.css"> </head> <body> <h1>Welcome to GeeksforGeeks</h1> <p> <a class="link" href= "https://www.geeksforgeeks.org/"> This Link </a> will take you to the homepage of geeksforgeeks. </p> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por anushkachauhan1503 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA