Less in the background project uses a loop to output classes and functions used

Function arguments have class name Settings

Dynamic computing for mobile adaptation

The function definitions

  .small(@name, @value) {
      @{name}: (@value/100rem);
    }
Copy the code

A function call

.small(margin-left,16);

Use the syntax

If it is an argument, the class name argument should be enclosed in parentheses @{name}, not to the left of the colon, or if there are double quotation marks. If there is a calculation on the right hand side, put parentheses

The less loop outputs the class name

Target class name

  .p0 {
  padding: 0px;
}
.ml0 {
  margin-left: 0px;
}
.mr0 {
  margin-right: 0px;
}
.p1 {
  padding: 1px;
}
.ml1 {
  margin-left: 1px;
}
.mr1 {
  margin-right: 1px;
}
.p2 {
  padding: 2px;
}
.ml2 {
  margin-left: 2px;
}
.mr2 {
  margin-right: 2px;
}

Copy the code

Implementation approach

  1. Since the form above is very similar, so define a template function;
  2. To define alessList, write all the required class names;
  3. Loop through the list, calling the function.

Implementation steps

  1. Define the function and its contents
.setmp(@n,@i:0) when(@i<@n){ .p@{i} {padding:unit(@i,px); } .ml@{i} { margin-left:unit(@i,px); } .mr@{i} { margin-right:unit(@i,px); } .setmp(@n,(@i+1)); }Copy the code
  1. perform

.setmp(3);

  1. complete
.setmp(@n,@i:0) when(@i<@n){ .p@{i} {padding:unit(@i,px); } .ml@{i} { margin-left:unit(@i,px); } .mr@{i} { margin-right:unit(@i,px); } .setmp(@n,(@i+1)); } .setmp(3);Copy the code

Grammar specification

  1. Circulation function
    • setmpDefine a loop,whenAs a condition of execution
    • Function template is not executed once for a sum, for the next judgment
    • Function call, which accepts two arguments, the number and the initial value
    • unitislessIt has its own way of changing units,The unit (10, 10 px)get10px