Google Choice: LESS

Friday, March 3, 2017

LESS - Loops

Loops statement allows us to execute a statement or group of statements multiple times. Various iterative/loop structures can be created when recursive mixin combined with Guard Expressions and Pattern Matching.

Example

The below example demonstrate use of loops in the LESS file:

loop_example.htm

<!doctype html>
<head>
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="cont">
   <h2>Welcome to TutorialsPoint</h2>
   <p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>

Next, create file style.less

style.less

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

You can compile the style.less file to style.css by using the following command:

lessc style.less style.css

Next execute the above command, it will create style.css file automatically with the below code:

style.css

div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}

Output

Let's carry out the following steps to see how above code works:

Save the above html code in loop_example.htm file.
Open this HTML file in a browser, an output as below gets displayed.

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews