（1）變量

我們常常在 CSS 中 看到同一個值重復多次，這樣難易於代碼維護

const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);

只要我們修改 bgColor這一個變量， 整個頁面的背景顏色都會隨之改變。而 Less 中的變量十分強大，可化萬物，值得一提的是，其變量是常量 ，所以只能定義一次，不能重復使用。

①值變量

      /* Less */
      @color: #999;
      @bgColor: skyblue;//不要添加引號
      @width: 50%;
      #wrap {
        color: @color;
        width: @width;
      }
    
      /* 生成後的 CSS */
      #wrap {
        color: #999;
        width: 50%;
      }

以 @ 開頭 定義變量，並且使用時 直接 鍵入 @名稱。在平時工作中，我們就可以把 常用的變量 封裝到一個文件中，這樣利於代碼組織維護。

      @lightPrimaryColor: #c5cae9;
      @textPrimaryColor: #fff;
      @accentColor: rgb(99, 137, 185);
      @primaryTextColor: #646464;
      @secondaryTextColor: #000;
      @dividerColor: #b6b6b6;
      @borderColor: #dadada;

②選擇器變量

讓 選擇器 變成 動態

      /* Less */
      @mySelector: #wrap;
      @Wrap: wrap;
      @{mySelector}{ 
 
//變量名 必須使用大括號包裹
        color: #999;
        width: 50%;
      }
      [email protected]{Wrap}{
        color:#ccc;
      }
      #@{Wrap}{
        color:#666;
      }
    
      /* 生成的 CSS */
      #wrap{
        color: #999;
        width: 50%;
      }
      .wrap{
        color:#ccc;
      }
      #wrap{
        color:#666;
      }

③屬性變量

減少代碼書寫量

（2）

.

Less功能特性