less (7) the use of when

Let's take a look at the use of less when;

Let's write a style: when the input width is greater than or equal to 150px, add a style to the div;

                           When the input width is less than 150px, add another style to the div;

The above function can be achieved by using when:

.bgWidth (@width) when (@width < 150 ){

width : 100 px ;

height : 50 px ;

border : 1 px solid red ;

}

.bgWidth (@width) when (@width >= 150 ){

width : 200 px ;

height : 100 px ;

border : 1 px solid red ;

}

div {

.bgWidth( 300 px)

}

我们写了两个一样的函数，后面紧跟一个 when()  ,里面的判断条件不一样，

当满足条件时，就执行里面的样式；