How to Create a Matrix From a Nested Loop in MATLAB?

How to create a loop structure in LESS ?

Last Updated : 20 Oct, 2021

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:

How to Create a Matrix From a Nested Loop in MATLAB?

P

parthmanchanda81

Improve

Article Tags :

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.

How to Create a Matrix From a Nested Loop in MATLAB?

Matrices are 2-dimensional arrays that store numeric or symbolic data. It is convenient to create them with the help of nested loops as the outer loop creates the elements along one dimension and the inner loop creates the elements along the second dimension. In this article, we will see how to crea

How to Create an Unordered List in HTML ?

An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> <

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

How to write a for loop in ES6 ?

Loops are the way to do the same task again and again in a cyclic way. A loop represents a set of instructions that must be repeated. In a loopâ€™s context, a repetition is termed an iteration. There are mainly two types of loops: Entry Controlled loops: In this type of loop the test condition is test

How to Create Custom Iterators and Iterables in JavaScript ?

Iterators and Iterables are important concepts in the world of programming. They allow developers to traverse and manipulate collections of data in a more efficient and flexible way. JavaScript, being a high-level programming language, also supports iterators and iterables. In this article, we will

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

How to Loop Each Block X Amount of Times in Svelte?

Svelte is a modern JavaScript framework that offers a unique approach to building web applications by compiling components at build time. One common requirement in web development is iterating over a block of code a specific number of times. In Svelte, this can be achieved using the {#each} block. T

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

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