less語法的技巧總結，很基礎，熟練掌握后能提高我們在大型項目中的開發(fā)效率

@a:0.5;
@showdaw-px:100;
@mkcolor1:#6ec5ff;
@num:1;
.outer{
  //拼接的字符串在變量后面，需要在冒號后面加~
  @width:~"@{showdaw-px}px";
  //拼接的字符串在冒號后面，使用的時候是@@var
  @bgColor:"mkcolor@{num}";
  //乘法運算先定義好運算接口的變量，再引用
  @alpha:@a * 100;
  opacity: @a;
  filter: alpha(opacity=@alpha);
  height: 300px;
  background: @@bgColor;
  width: @width;
}

//無參數(shù)，省略括號,編譯的時候會顯示這個類
// .pub{
//   width: 100px;
//   height: 100px;
//   background: green;
// }

//有參數(shù)，是函數(shù)，不會編譯這個函數(shù)
.pub(@bg:green){
  width: 100px;
  height: 100px;
  background: @bg;
}
.outer{
  .pub(red);
  // .pub;
  // background: red;
}
//@arguments 所有參數(shù)
.transition(@property:all,@duration,@timing:linear,@delay:0s){
    transition: @arguments;
}


.sum(@n,@m){
  @result:@n + @m;
}

.box{
  .sum(10,20);
  width:unit(@result,px);
  /* unit是less提供的方法，
    unit([value],'px)是給value值設置單位，
    但是如果之前有單位，此處會把原來的單位去掉
  */
}

/* 繼承
   less中的繼承不是copy代碼，
   而是讓繼承與被繼承公用一套css代碼
*/
.pub2{
  width: 100px;height: 100px;
  background-color: red;
}

/* .div:extend(.pub2){
  background-color: green;
} */
.div{
  &:extend(.pub2);
  background-color: green;
}



.com{
  padding: 10px;
  margin: 10px;
}
/* 繼承多個樣式類 */
.box2{
  &:extend(.pub2,.com);

}

.box3{
  .mark{
    width: 100px;
    height: 100px;
  }
  .inner{
    // &:extend(.mark);  //這樣不能繼承.mark
    &:extend(.box3 .mark);
    background:red;
  }
}

遞歸

.columns(@i) when(@i <= 4){
  // width: unit(@i,'px');
  .box@{i}{
    width: unit(@i*10,px);
    margin-bottom: unit(@i*2,px);
    background:red;
    &:hover{
      background: green;
    }
  }
  .columns(@i+1)
}

.columns(1);

less連接符與import

@import (reference) './test.less';
//只導入這個css文件，不編譯里面的css內容
.box{
  .mark{

  }
  &.pp{
    background-color: red;
    height: 100px;
  }
  & > .mm{
    background: green;
  }
  .box222{
    .bgColor;
  }
}

關注我的個人公眾號，獲取更多前后端開發(fā)經(jīng)驗知識
文章來源地址http://www.zghlxwxcb.cn/news/detail-565960.html

到了這里，關于less預處理語言的運用之-變量拼接那點事的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！