El bucle es un método de programación que nos permite usar una declaración en particular varias veces. Los bucles LESS nos brindan la misma comodidad. En LESS, los bucles se crean utilizando mezclas recursivas junto con expresiones de protección y coincidencia de patrones. Tenemos que seguir los pasos a continuación para crear un bucle en LESS.
- La llamada principal a mixin: Se requiere una llamada principal a mixin para iniciar la iteración. Al igual que en otros lenguajes de programación, inicializamos el valor de la variable de bucle para iniciar el bucle, de manera similar, esta llamada principal actúa como inicializador en LESS.
- Mezclar con expresiones de guardia: Guard actúa como una condición en el bucle. Indica cuándo debe terminar el bucle.
- Hacer que el mixin sea recursivo: se necesita una declaración dentro del mixin para que sea recursivo. Al igual que otros lenguajes de programación, un argumento puede incrementarse o disminuirse cuando se pasa a la función para la siguiente iteración.
- Enunciados a repetir: Luego vienen los enunciados que se necesitan repetir. Esas declaraciones están escritas dentro de la estructura del ciclo.
Echemos un vistazo a un ejemplo de un bucle en LESS.
Ejemplo: Escribiremos nuestro código LESS con el bucle.
file.less
.temp (@var) when (@var > 0) {
.st-@{var} {
font-size : (10px * @var);
}
.temp(@var - 1);
}
.temp(3);
Este código menos se puede compilar en un código CSS usando el comando:
lessc file.less file.css
Salida CSS: Esto generará el código CSS al siguiente equivalente:
file.css
.st-3 {
font-size: 30px;
}
.st-2 {
font-size: 20px;
}
.st-1 {
font-size: 10px;
}
Ahora escribamos un código HTML para usar el archivo CSS anterior.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="file.css" type="text/css" /> </head> <body> <div> <h2 class="st-3">Welcome To GFG</h2> <p class="st-2"> GeeksforGeeks is a platform for learning enthusiasts. </p> <p class="st-1"> Computer Science Portal. </p> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parthmanchanda81 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA