"Less series" advanced features-pattern matching

I already have an article written in the basic grammar of less.

So this time, let's look at the advanced features of less.

Although the practical degree of the pattern matching is generally the same, but in the key time, have them in the words, or can let us develop more handy.

In fact, the default value of the parameter setting is the simplest pattern match.

You call the Mixins function, pass in the arguments, and do not pass in the parameters, and may have different compilation results.

In addition to that, pattern matching is still the case, let's take a look.

As previously customary, less code and CSS codes were compiled and compiled before compilation.

1. Match different mixins with different number of parameters

/**/. Test (@size){  width: @size;} . Test (@size, @multiple) {  width: @size * @multiple;} . El-a {  . Test (10px);} . El-b {  . Test (10px, 2);}

/**/{  width: 10px;}  {  width: 20px;}

2. Use constant parameters to match different mixins

 /*   less CODE  */ .test (Large, @size: 10px)  { width :  @size * 2 ;} .test (Simple, @size: 10px)  {:  @size ;} .test (@_, @size: 10px)  { display :  block ;} .el-a  {} .el-b  {} 

/**/{  width: 20px;   Display: block;}  {  width: 10px;   Display: block;}

Here's how the whole process happens:

The first. Test is matched only if the large condition is satisfied;

The second. Test is matched only if the simple condition is satisfied;

The third. Test is matched under any condition, even large and simple, as long as the pass-through rule is satisfied (. Test requires passing one or two parameters);

As long as the mixins satisfies the matching requirements, it will be used.

A variable can match any value, and a constant can match successfully only if the value passed in is exactly equal to it.

3.

Less series advanced features-pattern matching