How to create a loop structure in LESS ? Last Updated : 20 Oct, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report Looping is a programming method that allows us to use a particular statement multiple times. LESS loops provide us with the same convenience. In LESS, loops are created using recursive mixin along with Guard Expressions and Pattern Matching. We have to follow the below steps for creating a loop in LESS. The primary call to mixin: A primary call to mixin is required to start the iteration. Just like in other programming languages, we initialize the value of the looping variable to start the loop, similarly, this primary call acts as an initializer in LESS.Mixin with guard expressions: Guard acts as a condition in the loop. It tells when the loop has to terminate.Making mixin recursive: A statement is needed within the mixin to make it recursive. Just like other programming languages, an argument can be incremented or decremented when passed to the function for the next iteration.Statements to be repeated: Then comes the statements that are needed to be repeated. Those statements are written inside the loop structure. Let's have a look at an example of a loop in LESS. Example: We will write our LESS code with the loop. file.less .temp (@var) when (@var > 0) { .st-@{var} { font-size : (10px * @var); } .temp(@var - 1); } .temp(3); This less code can be compiled into a CSS code by using the command: lessc file.less file.css CSS Output: This will generate the CSS code to the following equivalent: file.css .st-3 { font-size: 30px; } .st-2 { font-size: 20px; } .st-1 { font-size: 10px; } Now let's write an HTML code to use the above CSS file. 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> Output: Comment More infoAdvertise with us Next Article How to Create a Nested For Loop in R? P parthmanchanda81 Follow Improve Article Tags : Web Technologies CSS TrueGeek TrueGeek-2021 CSS-Questions +1 More Similar Reads How to Create a Nested For Loop in R? A loop in a programming language is a sequence of instructions executed one after the other unless a final condition is met. Using loops is quite frequent in a program. Need of a loop Let us consider a scenario where we want to print natural numbers from 1 to 3. We can simply print them one by one. 6 min read How to pre-compile LESS into CSS ? In this article, we will discuss how to pre-compile the LESS file into a CSS file & will understand its implementation through the example.Introduction: LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a 3 min read What are nested rules in LESS ? In this article we will learn about nested rules in Less, We can very easily define nested rules in LESS. Nested rules are defined as a set of CSS properties that allow the properties of one class to be used for another class and contain the class name as its property. In LESS, you can use class or 3 min read How to create a LESS file and how to compile it ? LESS (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS. CSS itself is great for defining styles and applying them to various HTML elements but it has a few limitations. Limitations of CSS: Writing CSS code becomes exhausting, especially in big projects.Mainta 2 min read How to import LESS through npm ? LESS stands for Leaner Style Sheets. It is a backward-compatible language extension for CSS. Web pages can be styled by writing appropriate code in a file with .less extension and then converting it in a CSS file. Steps to install LESS: Step 1: To install LESS, first make sure that node and npm are 2 min read How to define scope in the context of variables in LESS ? Variable scope is used to specify the availability of variables in certain parts of the code. Firstly, the variables are searched from the local scope (i.e the variables which are declared within the code block of a particular selector); if they are not found, then they are searched from the parent 1 min read Like