Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create the loop structure in LESS
Overview
Loops make our code clean and help to run the same lines of code multiple times. This makes a code to not to write the same lines of code multiple times. So to style the multiple containers and objects the same can be done by writing a line of code and repeating the same styling property several times. So to come up from this problem, Leaner Style Sheets (LESS) provides a looping facility by using which we can make our code readability easy and can save the developer time of developers in writing numbers of lines of styling property code.
Syntax
The syntax to use the loop in Leaner Style Sheets (LESS) is −
.functionName (@variableName) when (terminationCondition) { .selector{ font-size : (18px * @variable); color:green } .functionName(decrement/increment); }
functionName − The function name can be user-defined as per the developers choice.
variableName − The variable name can also be written by the developer. The variable name in the LESS preprocessor is written with the prefix “@” in it. Example: @name, @width, @height, @border etc.
selector − The selector inside the loop are the class, id and tag that are to be styled dynamically with the loop.
Increment/decrement − These are the conditional properties which depend upon the situation that the developer wants to perform the task.
TerminationCondition − It is the condition at which the loop stops. Suppose the termination condition is set to variable greater than 0 and variable gets decremented so when the variable value will be equals to or smaller than 0 the loop will be terminated.
Algorithm
Step 1 − Create a HTML boilerplate in any text editor. Add a few elements with class names.
Step 2 − Link the style sheet to the HTML page with the link as “style.css”.
<link rel="stylesheet" href="style.css">
Step 3 − Create a “style.less” file in the same folder and create a loop using the above given syntax with the user defined function name, variable name.
Step 4 − Add the termination condition as the loop terminates when the variable value is smaller than 0
Step 5 − Now inherit the styling component to which we had to reflect the styling. If the class name is the same with a change in number then we can use the current variable value and concatenate it with the class name.
Step 6 − Decrement the current value of the variable. To take the loop to the termination condition. If this step is not followed then the loop will take the current value and will reflect the change only once.
fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
Step 7 − When the loop ends, call the function and pass the value in it.
.fsize(3);
Step 8 − Open the terminal and reach the current folder in it using the “cd” command which changes the directory.
Step 9 − Use the following command to compile the less file.
lessc style.less > style.css
Step 10 − Now the LESS file is compiled and converted to “style.css”.
Step 11 − Output can be seen on the browser.
Example
In the given example, we have created a simple HTML page with few HTML div tags in it. In the style.less file we have created a loop through which we have iterated the styling property which reflects the particular selected selector which is the class name. In the style.less code given below a fsize() function is taken into consideration in which the variable is passed as parameter. In the loop we had used the recursive property which terminates when the value of the variable is smaller or equal to the 0.
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>LESS Loops</title>
<style>
.space3 {
font-size: 54px;
color: green;
}
.space2 {
font-size: 36px;
color: green;
}
.space1 {
font-size: 18px;
color: green;
}
.fsize (@variable) when (@variable > 0) {
.space@{variable} {
font-size : (18px * @variable);
color:green
}
.fsize(@variable - 1);
}
.fsize(3);
</style>
</head>
<body>
<div class="space1">tutorialspoint.com</div>
<div class="space2">tutorialspoint.com</div>
<div class="space3">tutorialspoint.com</div>
</body>
</html>
To reflect the styling to the main page we have to convert the style.less to styling sheet to the style.css because the style.css sheet is linked with the index page. To convert it we should have a less compiler which will compile the given less file to css. Now open the terminal and reach the style.less folder to use the less compiler command given below.
Using the above command the less file is compiled and converted into Cascading Style Sheet (CSS) which changes the styling of the page. The below style.css code is the resultant of the above compiled less file which contains the loop.
The below image contains the output of the above example, which contains three div containers with text in it. so when in the less file the function is called the loop starts and it initializes the variable with value 3, when the style property style gets the value it calculates and changes the font size accordingly with the same color name. then the value of the variable gets decremented by 1 then the value of the variable sets to 2 and the same procedure goes on until the value of the variable is less then or equals to 0. when the value of the variable is equal to 0 the loop gets terminated and when compiled using the lessc compiler it reflects the changes to css page which reflects the styling to the main index page.
Conclusion
When the name of variable is given wrong in some part of the code, while compiling the code it gives an error. When we are calling the function outside the loop the feature in the LESS is called mixin. This is a great feature of LESS through which we can use the property of the one element with another. To run the above loop one must have the basic understanding of how the loop works and the understanding of recursion.
96 Views
