也是不定期更新吧，具體也沒有總結(jié)一下：
之前的文章 less的配置安裝及語法使用 也介紹了一些less的語法，
這里只是根據(jù)我平時會用到的進行一個總結(jié)：

函數(shù)參數(shù)帶有類名設(shè)置

• 函數(shù)定義

這個根據(jù)每個的設(shè)計稿和基礎(chǔ)適配的font-size決定，我這里只是說傳入?yún)?shù)生成對應(yīng)的rem的值

@base:750 / 720 * 0.01;
.px2rem(@name, @px) {
     @{name}: @px * @base * 1rem;
}

• 函數(shù)調(diào)用

.px2rem(margin-top,250);

• 使用語法

如果是參數(shù)，類名參數(shù)要加大括號@{name}，不是冒號左邊的不需要，如果有雙引號也要加。

less循環(huán)輸出類名

• 目標(biāo)輸出

.a{
  background: url("./resource/a.png") top/100% no-repeat;
}
.b{
  background: url("./resource/b.png") top/100% no-repeat;
}
.c{
  background: url("./resource/c.png") top/100% no-repeat;
}

• 實現(xiàn)思路

  • 由于形式上面很類似，所以先定義一個模板函數(shù)；
  • 定義一個less列表，把需要的類名都寫上；
  • 循環(huán)遍歷列表，調(diào)用函數(shù)。

• 實現(xiàn)步驟

  1. 定義函數(shù)

  ```
      .backgroundcard(@className,@pngName){
            .@{className}{
                  background: url("./resource/@{pngName}.png") top/100% no-repeat;
            }
      }
  ```
  

  2. 定義一個數(shù)組

  @bgcardList:a,b,c,d,e,f,g;
  

  3. 循環(huán)遍歷

  .loop(@i) when (@i < length(@bgcardList)+1){
      .backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
      .loop(@i+1);
  }
  .loop(1);
  

• 語法

  + 列表函數(shù)
      - 獲取列表的長度  length(@bgcardList)  //7
      - 獲取列表元素  extract(@bgcardList, 3)  //c
  + 循環(huán)函數(shù)
      - loop定義循環(huán)次數(shù)，when條件判斷，符合進入函數(shù)，不符合不進入函數(shù)。之后次數(shù)+1，形成循環(huán)。
      - loop函數(shù)調(diào)用，直接傳值1。
  

@version1.0——2018-8-3——創(chuàng)建《less的函數(shù)與循環(huán)——使用總結(jié)》
分割線

之后將不定期更新...

?burning_韻七七