Detailed explanation of some less syntaxes and less syntaxes

Detailed explanation of some less syntaxes and less syntaxes

The syntax in less is mainly used to introduce some commonly used syntaxes. If you have more and more practical syntaxes, you are welcome to talk with me.

1. variables.

Variables are recognized as @, and those starting with @ in less are variables. For the naming method of variable names, you can refer to the naming rules in js. After all, they are frontend, having a unified habit will help us to unify our style. The personal recommendation variable name naming Rules use the hump naming method. The first word starts with lowercase letters, and starts with the second one. Such as boxAaa, boxBbbb, boxContainer ,......, Of course, it is also named by the underscore "_" in the sausage naming method. For example, box_main, border_bottom ,.......

2. Hybrid.

This mode is common, such as the specified main background color and main text color. You can define related colors in advance. It is called directly when used, for example.

. Border_radius (@ radius: 5px ){
Border-radius: @ radius;
-Webkit-border-radius: @ radius;
}
. Box_02 {
Margin-left: 50%;
Width: 200px;
Height: 60px;
. Border_radius ();
Background: # ccc;
}

This is convenient and can be maintained later.

Iii. Matching Mode

Matching pattern helps us save code and evoke memories.

Example:

. Triangle (top, @ w: 5px, @ c: # ccc ){
. Sanjiao_001 ();
Border-width: @ w;
Border-color: transparent @ c transparent;
Border-style: dashed solid dashed;
}
. Triangle (bottom, @ w: 5px, @ c: # ccc ){
. Sanjiao_001 ();
Border-width: @ w;
Border-color: @ c transparent;
Border-style: solid dashed;
}

You can directly use this method when calling:

. Sanjiao {
. Triangle (bottom );
}

Iv. Operations

The less operation uses the basic unit operation by default,

@ W = 100px;

. Bar_002 {
Width: @ w-30;
Height: 20px;
Margin: 0 auto;
Background: # cdecde;
}

In this case, px is the default unit.

One difference between less and css3 is that the unit of percentage cannot be used together with other units. For example:

. Bar_002 {
Width: 100%-30px;
Height: 20px;
Margin: 0 auto;
Background: # cdecde;
}

When editing in the above calculation, an error is reported, which cannot be used in this way. We recommend that you use css native.

. Bar_002 {
Width :~ "Calc (100%-30px )";
Height: 20px;
Margin: 0 auto;
Background: # cdecde;
}

Use "~" Symbol to tell the content in the less quotes that does not need to be compiled.

5. nested rules

The nesting rules are actually the same as the hierarchical selector in css. There is no much difference (it is best to control the hierarchy within three layers, which helps the browser to identify it ).

In addition, there is another symbol that must be said to be "&". This symbol is used in the relative path. /"has the same meaning, is the last meaning of the return, this pair is used as the element: hover,: avtice, etc. has a good selection effect.

6. @ arguments variable

When we set many default values for the variables, we do not want to modify them at this time and want to apply them directly, arguments is undoubtedly a convenient method. With this parameter, we can use all the default variables directly.

Example:

. Bar_004 (@ w: 100%, @ xx: solid, @ c: # ccc ){
Border: @ arguments;
}

7. Use important to increase the priority.

When we use important, we can use not only variables but also classes. Use this to increase the priority to achieve the desired effect.