directory

  • Function arguments have class name Settings
    • The function definitions
    • A function call
    • Use the syntax
  • The less loop outputs the class name
    • The target output
    • Implementation approach
    • Implementation steps
    • Grammar specification

The previous article Less(2) — Basic Syntax also introduced some Less syntax, here is just based on my usual use of a summary:

Function arguments have class name Settings

The function definitions

This depends on each design and the font size of the base fit, I’m just saying here that the incoming parameters generate the corresponding REM value

@base:750 / 720 * 0.01;
.px2rem(@name.@px) {
     @{name}: @px * @base * 1rem;
}
Copy the code

A function call

.px2rem(margin-top,250);
Copy the code

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.

The less loop outputs the class name

The target output

.a{
  background: url("./resource/a.png") top/100% no-repeat;
}
.b{
  background: url("./resource/b.png") top/100% no-repeat;
}
.c{
  background: url("./resource/c.png") top/100% no-repeat;
}

Copy the code

Implementation approach

  • Since the form above is very similar, so define a template function;
  • Define a less list with all required class names;
  • Loop through the list, calling the function.

Implementation steps

  1. Define a function
    .backgroundcard(@className.@pngName) {.@{className}{
                background: url("./resource/@{pngName}.png") top/100%no-repeat; }}Copy the code
  1. Define an array
@bgcardList:a,b,c,d,e,f,g;
Copy the code
  1. To iterate over
.loop(@i) when (@i < length(@bgcardList) +1) {.backgroundcard(extract(@bgcardList.@i),extract(@bgcardList.@i));
    .loop(@i+1);
}
.loop(1);
Copy the code

Grammar specification

  • The list of functions
    • Gets the length of the listlength(@bgcardList)/ / 7
    • Getting list elementsextract(@bgcardList, 3) // c
  • Circulation function
    • loopDefine the number of cycles,whenCondition judgment, fit into the function, do not fit into the function. After a number of+ 1, forming a cycle.
    • loopFunction call, pass the value directly1.

Will be updated from time to time…