1. 簡介

• 什么是less?
  Less 是一門 CSS 預處理語言，使用了類似CSS的語法，為CSS賦予了動態語言的特征。它擴展了 CSS 語言，增加了變量、Mixin(混合)、嵌套、函數和運算等特性，使 CSS 更易維護和擴展。此外，Less 可以運行在 Node 或瀏覽器端。
  Boostrap的框架就是使用less和sass開發的，less類似于javascript , 作為css的一種擴展。

• less的特點？
  作為CSS的一種擴展，less不僅向下兼容CSS的語法，而且連新增的特性也是使用CSS語法。這樣的設置使得學習less非常輕松，而且你可以在任何時候回退到CSS。
  LESS中文網 : http://www.lesscss.cn/
  github : https://github.com/less/less.js

• 如何使用less?

方式一：客戶端直接調用

        1. 引入 .less 樣式文件
  <link rel="stylesheet/less" href="less/less.less">
  <!--用于編譯LESS的-->
        2. 引入less.js 庫
  <script type="text/javascript" src="js/less.min.js"></script>

注意：必須在服務器環境中才能生效

webstrom自帶了一個本地服務器

方式二：預編譯（提前編譯, 推薦）

    1.在代碼編輯器中，按照LESS的語法規則寫好LESS文件；

    2.使用編譯工具把.less文件編譯成.css文件；

    3.把編譯后的css文件引入到頁面即可。

• 編譯工具：Koala

• 安裝編譯工具
  官網：http://koala-app.com/index-zh.html
  下載需要翻墻

      使用koala把less文件變成css的方法
      - 第一步：
      選中less文件夾
  
     - 第二步：
      應該點擊Reload
  
     - 第三步：
      自動生成css文件夾
  
     - 第四步：
      引入less編譯生成的css文件
  

• web開發常用的服務器組合

    1.WAMP:   windows + apache + MySQL + PHP
    2.LAMP:   Linux + apache + MySQL + PHP    (推薦)
    3.MAMP:   Mac + apache + MySQL + PHP
  

less語法

• 1. 變量：（格式：@變量名:值）
     單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

      // JS中定義變量
      var name = '張三';
     
      // LESS中定義變量
      @color:red;
        h1{
           color: @color;
          }
     

• 2. 變量的抽取

      @import url('./base.less');
     
      @import url('./base');
     
      @import "./base";
     
      @import "base";
     

• 3. 方式一不常用，因為要依賴服務器環境

• 4. 嵌套
     在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度上減少了代碼量，并且代碼看起來更加清晰。
     注意：嵌套一般情況下，不要超過3層

      //1.定義變量
      @color:red;
      @width:50px;
      @height:50px;
      @bgColor:green;
      //2.嵌套案例
      .box{
        width: @width*3;
        height: @height*3;
        background-color:@bgColor;
     
      .test1{
          width: @width + 20px;
          height: @height + 20px;
          background-color: white;
     
        .test3{
           background-color: @color;
            }
        }
      }
     

• 5. 運算
     運算提供了加、減、乘、除操作，其他復雜的運算交給函數；通常我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。
     注意：運算符與值之間必須以空格分開 ; 在運算的時候，只要有一個有單位就行
• 6. 混合-自定義函數

28.png

• 7. 函數-自帶
     LESS中的函數 - 映射了JavaScript函數代碼，如果你愿意的話，可以操縱屬性值。
     比如：鼠標移上 , 透明度降50%。

29.png

需要查找的時候，直接查文檔就可以了。
http://lesscss.cn/functions/#color-operations-fade
hsla 顏色 : http://www.cnblogs.com/zhoushengxiu/p/5710691.html
比如 , 顏色操作函數：

desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%

fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%
spin(@color, 10); // 色相值增加 10
……

• 8. 匹配
     類似js中的if …else判斷，只有模式名稱匹配成功才能起作用。
     注意：匹配模式中,定義的模式名稱都是一樣的，只是參數不一樣，調用的時候只需選擇對應的參數就可以了。

@height:30px;

.radius(@Radius:30px){
   border-radius: @Radius;
}
/*參數一：模式名稱 ； 參數二：變量*/
.radius(l_t,@Radius:30px){
    border-top-left-radius: @Radius;
}
.radius(l_b,@Radius:30px){
  border-bottom-left-radius: @Radius;
}
.radius(r_t,@Radius:30px){
  border-top-right-radius: @Radius;
}
.radius(r_b,@Radius:30px){
  border-bottom-right-radius: @Radius;
}
div{
  width: @width; //可以
  height: @height;
  background-color: red;
  margin: @height;
}
/*四角圓*/
.test1{
  .radius(10px);
}
.test2{
  .radius(l_t,10px);
}
.test3{
  .radius(l_b,10px);
}
.test4{
  .radius(r_b,10px);
}