Less:優雅的寫CSS代碼

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。
demo.less

@base: #f938ab;/*定義變量*/
.box {
  color: @base;
  border-color: lighten(@base, 30%); /*使用函數*/
  /*嵌套*/
  &-content{
    width:100%;
  }
  .title{
      color:#ccc;
  }
}

變量

使用@符號定義。例如：

@base: #f938ab;.box {    color: @base; /*變量引用*/

變量也支持URLs：

// Variables
@images: "../img"; 
// 用法
body {  color: #444;  
background: url("@{images}/white-sand.png");

屬性也支持變量的形式：

@property: color;

.widget {
  @ {
    property
  }: #0ee;
  background-@{property}: # 999;
}

混合（Mixin）

混合就是前面定義的一個樣式，後文能夠直接引用。示例：

@base: #f938ab;
.ellipsis_txt {
  display: -webkit - box; -
  webkit - line - clamp: 2;
  overflow: hidden;
  word - break: break -all;
  text - overflow: ellipsis; -
  webkit - box - orient: vertical;
}

.box {
  color: @base;
  .ellipsis_txt;
  /*或者
  .ellipsis_txt();
  */
}

嵌套

能夠在一個css裏有多個css塊，以方便咱們更好的組織代碼，編寫css模板。

#header {
  color: black;
  .navigation {
    font - size: 12 px;
  }
  .logo {
    width: 300 px;
  }

還支持&符號：

#header {
  color: black; &
  -navigation {
    font - size: 12 px;
  } &
  -logo {
    width: 300 px;
  } &
  : hover {
    color: #ccc;
  }
}

生成：

#header {
  color: black;
}#
header - navigation {
  font - size: 12 px;
}#
header - logo {
  width: 300 px;
}#
header: hover {
  color: #ccc;
}

運算

任何數字、顏色或者變量均可以參與運算。下面是一組案例：

@base: 5 % ;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + # 111;
height: 100 % / 2 + @filler;

示例：

@var: 1 px + 5;
div {
  width: @var;
}

輸出：

div {
  width: 6 px;
}

函數

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在函數手冊中有詳細介紹。

函數的用法很是簡單。下面這個例子將介紹如何將 0.5 轉換爲 50%，將顏色飽和度增長 5%，以及顏色亮度下降 25% 而且色相值增長 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5 % );
  background - color: spin(lighten(@base, 25 % ), 8);
}


編譯生成：

  .class {
    width: 50 % ;
    color: #f6430f;
    background - color: #f8b38d;
  }

命名空間

有時候，你可能爲了更好組織 CSS 或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來，一些屬性集以後能夠重複使用。
示例：

/*模塊*/ #
bundle {
  .button {
    display: block;
    border: 1 px solid black;
    background - color: grey; &
    : hover {
      background - color: white
    }
  }
  .tab {
    /**/ }
  .citation {
    /**/ }
}

/*下面複用上面的一部分代碼*/
#header a {
  color: orange;#bundle > .button;
}

編譯生成：

# bundle.button {
  display: block;
  border: 1 px solid black;
  background - color: grey;
}
#bundle.button: hover {
  background - color: white;
}
#bundle.tab {
  /**/
}
#bundle.citation {
  /**/
}

/*下面複用上面的一部分代碼*/
# header a {
  color: orange;
  display: block;
  border: 1 px solid black;
  background - color: grey;
}
#header a: hover {
    background - color: white;
}

LESS中的命名空間，屬於高級語法，在平常項目中應用比較普遍。咱們能夠用LESS中的命名空間爲本身封裝一些平常比較經常使用的類名，以便之後作項目的時候更有效率。

做用域

子類裏面的優先，找不到才往父類裏找。

示例：

@var: red;

#page {
  @var: white;#header {
    color: @var; // 這裏值是white
  }
}


也不會由於變量後面定義而影響做用域：

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
和上面的例子是同樣的。

註釋

css僅支持塊註釋。less裏塊註釋和行註釋均可以使用：

/* 一個註釋塊
style comment! */
@var: red;

// 這一行被註釋掉了！
@var: white;

導入

和css同樣，你能夠導入一個.less文件，此文件中的全部變量就能夠所有使用了。若是導入的文件是.less擴展名，則能夠將擴展名省略掉：

@import "library"; // library.less
@import "typo.css";

函數參考

color(string) 解析顏色, 將表明顏色的字符串轉換爲顏色值
convert(value, unit) 將數字從一種單位轉換到另外一種單位.第一個參數爲帶單位的數值, 第二個參數爲單位.
ceil(number) 向上取整
floor(number) 向下取整
percentage(number) 將浮點數轉換爲百分比字符串
round(number) 四捨五入取整
sqrt(number) 計算一個數的平方根, 並原樣保持單位
pow(number, number) 設第一個參數爲A, 第二個參數爲B, 返回A的B次方.
mod(number, number) 返回第一個參數對第二參數取餘的結果.
min(value1, ..., valueN) 返回一系列值中最小的那個.
max(value1, ..., valueN) 返回一系列值中最大的那個.
abs(number) 計算數字的絕對值, 並原樣保持單位
sin(number) 正弦函數
cos(number) 餘弦函數
asin(number) 反正弦函數.返回以弧度爲單位的角度, 區間在 - PI / 2 到 PI / 2 之間.
acos(number) 反餘弦函數.區間在 0 到 PI之間.
tan(number) 正切函數
atan(number) 反正切函數
pi() 返回圓周率 π(pi)
isnumber(value) 若是待驗證的值爲數字則返回 true, 不然返回 false
isstring(value) 若是待驗證的值是字符串則返回 true, 不然返回 false
iscolor(value) 若是待驗證的值爲顏色則返回 true, 不然返回 false