less hybrid + less calculation

Mixing in less

The meaning of
mixing : mixing is the way to introduce a series of attributes from one rule set to another. In
general, a rule set refers to a set of codes, a set of codes that define certain rules, such as a set of codes that define styles. It’s a rule set. For
example Insert picture description here
, the style inside is a rule set.
Mixing means applying a set of rules to another element

Mixed categories:

普通混合
不带输出的混合
带参数的混合
带参数并且有默认值的混合
带多个参数的混合
命名参数
匹配模式
arguments变量

Normal mix

That is, directly write a selector that does not affect the elements in the html, and then write the rule set in the code body, and then directly let other rule sets call
Insert picture description here
This method causes less when compiling the css is not to be compiled into the css selector #diaoyongalso translated into a

Mix without output

Adding after the selector ()will not be compiled into ``css```
Insert picture description here

Time of the call plus without ()all right

Mixed with parameters

Parameters are variables, so we can also set formal parameters and pass actual parameters to it just like a function, but note that this is a hybrid, not a function
Insert picture description here
Define the attribute value that the formal parameter is @aset to background-color, which is equal to background-colora rule set with a variable value at this time , and then pass the parameter while calling the changed background-colorvalue

Mixed with parameters and default values

The method 形参变量:值of setting the default value: After setting the default value, when no value is passed to the formal parameter, the value of these variables is automatically set to the default value
Insert picture description here
Note that only the parameters with default values ​​can be declared in parentheses when invoking, but the parameters without default values ​​will be reported when invoking, if there is no declaration in the parentheses.

Mixing with multiple parameters

Insert picture description here

In this way, a mixture of multiple parameters

Named parameters

When our mix has multiple parameters, we can copy the specific parameters without default value or need to change the default value.
Specify the variable name when calling, and assign it specially
Insert picture description here
It is possible to modify only the default values ​​of some specific variables in the formal parameters

Match mode

This mixture is similar to the overloading of functions. We write multiple mixtures of the same name and the same parameter, but our functions are different. We can add a character in front of each parameter with the same name as its identifier. Different from other mixtures of the same name
Insert picture description here
If we add one to the front of a mixture with the same name, @_it will become an automatic call mixture, that is, when we call other mixtures with the same name, the system will automatically call this mixture at the same time.

Call a method of a mixture of the same name:
when we call one of the mixtures, we can add a specific indicator of the mixture of the same name in front of the actual parameter list to tell the system which mixture of the same name we want to call
即匹配哪个同名混合,(匹配模式)
Insert picture description here
Here will also automatically call the added @_mix of the same name, the first line is to introduce other less files

Introduce other less files in less

That is, we can write complex and versatile code in a less file, and then call other files to pass the value, similar to encapsulation.
Before calling the mix in other less, we need to put the declaration syntax before the call
:
@import "路径"
Insert picture description here
In this way, you can directly use the contents of other less files in a less file

arguments variable

Used to simplify the call of formal parameters in the mix. It
is tasteless, which is similar to the hidden array in js

We write i.e. mixed inside @argumentsit @argumentsa value equal to the value of the parameter of all, as shown below, @argumentsthe value 1px solid black
Insert picture description here
may be written a plurality of @argumentseach of @argumentsthe values are the same, all parameter values are the
Here,

less calculation

In less, you can add, subtract, multiply and divide. For example 100 + 100px, in less, the two sides of the operation can only add a unit. When calculating, it is best to add a space between the value and the operation symbol, otherwise it may make mistakes.

calc() operation function

Guess you like

Origin blog.csdn.net/qq_45821251/article/details/109403617