Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Less

This article undertakes the above “Less fast learning (ii)”, learning summary of Less.

Operations

In LESS, arithmetic operators can operate on any number, color, or variable, somewhat like calC

Mind mapping:

Unit to infer

Less will automatically infer the units of the value for you, so it is not necessary to add units to each value. If calC does not add units, it will not work

Example:

@width: 10 + 5px - 3;
.cal {
    width: @width;
}
Copy the code

Only 5px has units here, but it can still be converted successfully

.cal {
  width: 12px;
}
Copy the code

Note: Operators must be separated from values by Spaces. If not separated, an incorrect conversion result will be generated

@width: 10 +5px -3;
Copy the code

Width: 10 5px -3;

Operational priority

When it comes to priority calculation, you should use () to distinguish priority calculation, otherwise the priority of multiplication and division will be greater than the priority of addition and subtraction

Color value operation

Less converts the color value to RGB mode before converting it to a hexadecimal color value and returning it

Two hexadecimal calculations: #100001 + #002200 = #102201 if converted to 10:1048577 + 8704 = 1057281

The hexadecimal number 1057281 is 102201

Let’s look at this example: the result generated here is not #000001

/ / here1Convert RGB (1.1.1) In fact# 010101
color: # 000000 + 1;  
Copy the code

Because 1 actually means RGB (1,1,1), and if it’s 10, it’s RGB (10,10,10). Since RGB does not exceed 255, if it does, it defaults to RGB (255,255,255) # FFFFFF

---

function

Less provides a number of functions for converting colors, manipulating strings, and performing arithmetic operations that are very simple to use. In particular, there’s a function for the color part.

---

Namespace (namespace)

You want to group mixins for organizational purposes or just to provide some encapsulation. As mentioned earlier, mixing under different scopes will fail, as shown in the following example:

#div1 {
    .color {
        color: red; }}#div2 {
    .rect {
        .color(a); / / couldn't find itcolor}}Copy the code

So you can use the namespace approach, to use the chain structure to call the element style that you need to mix in. Here you can use #div1.color to blend in the color element under div1

#div1 {
    .color {
        color: red; }}#div2 {
    .rect {
        #div1.color; }}Copy the code

The result of the transformation:

#div1 .color {
  color: red;
}
#div2 .rect {
  color: red;
}
Copy the code

---

Import (@import)

In LESS, you can import one or more. Less files, and then all the variables in that file can be used in the current LESS project. This is similar to the introduction of CSS.

The imported command is @import

And can carry arguments, using @import (parameter 1, parameter 2) file address

parameter	role
once	The file is imported only once, and subsequent statements importing the same file are ignored (default)
reference	Use the less file without outputting it, such as defining the. A style in the import file, but not outputting the. A in the generated CSS
less	No matter what the extension is, treat it as less file
inline	Includes output in the source file, but does not process it

---

Conditional expression

In less, the conditional syntax is defined specifically for mixing, using the when keyword for judgment, and executing the code in parentheses only if the condition is met.

Mind mapping:

The when keyword

For example, if the width is more than 100px, set it to 100px, otherwise use the parameter passed in

@width: 110px; // Determine the width setwidth.setwidth (@w) when ( @w > 100px) {width: 100px;
}
.setwidth (@w) when ( @w <=100px) {width: @w;
}
.class1 {
    .setwidth(@width);
}
Copy the code

Converted CSS:

.class1 {
  width: 100px;
}
Copy the code

And or not

In the condition expression judgment, you can also use and or not for multi-condition judgment.

The keyword	role
and	Parallel operation, equivalent to && in JS
.	Or operation, the equivalent of JS in the | |
not	Non-operation, other than that

Example:

// If parameter1for5pxAnd parameters2for10To set up.fn1(@arg1, @arg2) when(@arg1 = 5) and (@arg2 = 10) {
    width: 10px;
    height: 10px; } / / parameters1Is greater than5Or parameters2Greater than or equal to10You can set up.fn2(@arg1, @arg2) when(@arg1 > 5) , (@arg2 >= 10) {
    width: 10px;
    height: 10px; } // Except for parameters1Is greater than5All of these can be true.fn3(@arg1, @arg2 : 10) when not (@arg1 > 5) {
    width: 10px;
    height: @arg2;
}

.a {
    .fn1(5.10);
}
.b {
    .fn2(1.10);
}
.c {
    .fn3(1);
}
Copy the code

Converted CSS code:

.a {
  width: 10px;
  height: 10px;
}
.b {
  width: 10px;
  height: 10px;
}
.c {
  width: 10px;
  height: 10;
}
Copy the code

At first glance, using less with conditional expressions may seem very complicated, but the reusability of expressions is very high, and for CSS styles that require more conditional expressions, it can save code and clean up the structure

Type checking function

In LESS, there is also a type checking function to check whether the type is consistent, which can be used in conjunction with the condition judgment

• Iscolor: True if the value is a color, false otherwise
• Isnumber: checks whether the value is a numerical value
• Isstring: Checks whether the value is a string
• Iskeyword: Determines whether the value is a keyword
• Isurl: Checks whether the value is a URL

Type checking function

Checks whether a value has a specific unit in addition to a number

• Ispixel: Determines whether pixel units exist
• Ispercentage: determines whether the percentage exists
• Isem: Checks whether the EM unit exists
• Isunit: Checks whether the specified type exists

---

Loop

In less, blending can call itself, much like JavaScript recursive calls, when a blending recursion calls itself, combined with conditional expressions and pattern matching, to write a loop structure.

recursive

Example: Shape a looping CSS, create 10 Li under UL, and gradually increase the width of li

// Recursive function definition.loopfn(@count) when(@count > 0) {
    .loopfn((@count - 1)); // Call itself recursively.li:nth-child(@{count}) {
        width: 10px* @count; }} // Function call.ul {
    .loopfn(10);
}
Copy the code

Converted CSS code:

.ul .li:nth-child(1) {
  width: 10px;
}
.ul .li:nth-child(2) {
  width: 20px;
}
.ul .li:nth-child(3) {
  width: 30px;
}
.ul .li:nth-child(4) {
  width: 40px;
}
.ul .li:nth-child(5) {
  width: 50px;
}
.ul .li:nth-child(6) {
  width: 60px;
}
.ul .li:nth-child(7) {
  width: 70px;
}
.ul .li:nth-child(8) {
  width: 80px;
}
.ul .li:nth-child(9) {
  width: 90px;
}
.ul .li:nth-child(10) {
  width: 100px;
}
Copy the code

Each function

In less, there is actually an each function that can loop as well. Its function is to bind the calculation of a rule set to each member of the list

Usage: each(variable, {… }), where @value can represent the value of the variable list, and @key can represent the key value of the variable list.

Example:

@colorList: {
    1: blue;
    2: red;
    3: yellow;
    4: green;
}

each(@colorList, {
    .set@{value} {
        color: @value; }});Copy the code

Converted CSS code:

.setblue {
  color: blue;
}
.setred {
  color: red;
}
.setyellow {
  color: yellow;
}
.setgreen {
  color: green;
}
Copy the code

---

Maps

As mentioned earlier, less can use namespaces to find blends that need to be used, much like JavaScript.

The mapping here is using mixins and rulesets as a map of a set of values. This approach is much like arrays in JavaScript.

Example:

#father {
    width: 100px;
    height: 70px;
    color: #f00;
}

.son1 {
    width: #father[width]; // Similar to JS array reference}.son2 {
    height: #father[height];
    color: #father[color];
}
Copy the code

Converted CSS code:

#father {
  width: 100px;
  height: 70px;
  color: #f00;
}
.son1 {
  width: 100px;
}
.son2 {
  height: 70px;
  color: #f00;
}

Copy the code