Less-mixin判斷（守衛）一

mixin衛士--判斷

類似於JavaScript的if/else

example:
.test(@a) when (@a>10){//當大於10
    font-size:18px;
}
.test(@a) when (@a<=10){//當小於等於10
    font-size:12px;
}
.test(@a){//無守衛
    color:#ff6a00;
}

/調用(小於等於10)
.study{
    .test(5);
}

//output css
.study {
  font-size: 12px;
  color: #ff6a00;
}

 

//調用(大於10)
.study{
    .test(20);
}

//output css
.study {
  font-size: 18px;
  color: #ff6a00;
}

最后一個是無需判斷就可以執行的，只要存在@a的值即可

與if/esle類似，同樣可以與數字，字符串，屬性，布爾值，變量等進行比較

example:
--布爾值
.test(@a) when (@a=true){
    color:#0094ff;
}
.study{
    .test(true);
}

//output css
.study {
  color: #0094ff;
}

下面這些值將不會被執行，因為不為真
.study{
    .test(false);
}
.study{
    .test(40);
}

 

--屬性
.test(@a) when (@a=height){
    color:#0094ff;
    @{a}:16px;
}
.study{
    .test(height);
}

//output css
.study {
  color: #0094ff;
  height: 16px;
}

 

--參數
.test(@a,@b) when (@a>@b){
    color:#0094ff;
    height:unit(@a,px);
}
.test(@a,@b) when (@a<=@b){
    color:#0094ff;
    height:unit(@b,px);
}
.study{
    .test(50,30);
}

//output css
.study {
  color: #0094ff;
  height: 50px;
}

 

作者：leona

原文鏈接：http://www.cnblogs.com/leona-d/p/6307375.html

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接