Less文檔詳解

一、變數

在Less中，我們可以使用變數來儲存顏色值、字體大小、邊框寬度等等。使用變數不僅可以使你的代碼更加簡潔易懂，還可以實現樣式的復用，快速修改某一樣式屬性。

定義變數的方式如下：

@color: #f00; //定義一個顏色變數
.box {
  background-color: @color; //調用變數
}

需要注意的是，變數必須以@符號開頭，不能使用$符號。

我們還可以在變數中進行簡單的數學運算：

@padding: 5px;
.box {
  margin: @padding * 2; //計算後的邊距為10px
}

二、嵌套

Less中支持樣式的嵌套，可以有效組織你的代碼結構，避免樣式的重複定義和不必要的選擇器。以下是一個嵌套的示例：

#nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        padding: 5px;
        text-decoration: none;
      }
    }
  }
}

嵌套語法使用起來非常簡單，只需要在父級選擇器後面加上花括弧即可。

三、Mixin

Mixin可以理解為樣式的一種可重用塊，可以定義一塊樣式，然後在其他樣式中重複使用。使用Mixin可以使代碼更具有可讀性和可維護性。以下是一個簡單的Mixin示例：

//定義
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

//使用
.box {
  .border-radius(5px); //調用Mixin
}

需要注意的是，Mixin必須以.開頭，且調用時必須加上括弧。

如果你使用的是Less 2.5.0及以上版本，你還可以使用Mixin的默認值特性。這樣，在調用Mixin時可以不用傳入參數，使用默認值。以下是一個使用默認值的Mixin示例：

//定義
.box-shadow(@x: 0, @y: 0, @blur: 5px, @color: #000) {
  box-shadow: @x @y @blur @color;
}

//使用
.box {
  .box-shadow(); //使用默認值，等同於調用.box-shadow(0, 0, 5px, #000)
}

四、函數

Less內置了一些函數，可以幫助你處理顏色、字體等屬性。以下是一些常用的函數示例：

//darken函數，使顏色變暗
color: darken(#f00, 10%);

//lighten函數，使顏色變亮
color: lighten(#f00, 10%);

//saturate函數，增加顏色的飽和度
color: saturate(#f00, 20%);

//desaturate函數，減小顏色的飽和度
color: desaturate(#f00, 20%);

//font-face函數，自定義字體
@font-face {
  font-family: 'Open Sans';
  src: url('OpenSans-Regular-webfont.eot');
  src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('OpenSans-Regular-webfont.woff') format('woff'),
       url('OpenSans-Regular-webfont.ttf') format('truetype'),
       url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

五、引入

Less支持在樣式文件中引入其他樣式文件，可以將大型項目中的樣式拆分為多個文件，使代碼更加清晰和模塊化。以下是一個簡單的引入示例：

//引入reset.less文件
@import 'reset.less';

//定義樣式
body {
  margin: 0;
  padding: 0;
}

需要注意的是，引入的文件必須是以.less結尾的Less文件。