10分鐘 深入less

Less

三種方式引用less

1. 瀏覽器引用 less.js
   Link type=”text/lesss
2. node中使用
   
   • lesssc less.less
   • lessc less.less css.css
   • lessc less.less css.css –clean-css

3. 工程中使用

   • 在file watch 中添加 less

   變量 @key:value

   • value 通常帶單位， 單位運算的時候會保留的
   • &：選擇器中訪問當前選擇器

   條件語句

   在js中，條件語句中 可以使用 if,else,switch定義，Less中語句中跟Switch中case比較像。

   Less 沒有像js中這樣的關鍵字，但是也提供了類似的方法，使用 when 以及 and not 關鍵字

   比較運算符號，less都支持

   > 表示大於
   > 表示小於
   >= 表示大於等於
   <- 表示小於等於
   = 表示等於

注意比較時候，參量值不要帶單位。

同時js中的邏輯運算符號，比喻與或關係，需要使用and 以及 not關鍵字。

.size(@w,@h) {
  width: @w;
  height: @h;
  background: red;
}

// when with great than 200px background id green
.size(@w,@h) when (@w>200) {
  background: green;
}

// when width   great than 200 and less than 500 background id  orange
.size(@w,@h) when (@w>200) and (@w<500) {
  background: orange;
}

// when  width not less or equal 400 background pink
.size(@w,@h) when not (@w <=400) {
  background: pink;
}

div {
  margin: 20px;
}

.section-1 {
  .size(200px, 100px)
}

.section-2 {
  .size(300px, 100px)
}

.section-3 {
  .size(450px, 100px)
}

內置方法

Less中內置了一些方法，讓我們操作數據更加方便。

數學方法

運算：在less中支持運算的，但是css中大多刷都是帶單位的，less在計算中支持帶單位的計算，並且在單位不統一的時候，會對單位進行換算。但是有一定的規則：

• 加減法：以第一個數據的單位作爲基準，
• 乘法：也就第一個數字的單位
• 除法：保留被除數的單位

鑑於此，乘除法儘量只出現一個單位，避免混淆。
Less與js類似的一點，也支持取整，對於數字取整來說，統共有一下方法：
ceil 向上取整
floor 向下取整
round 四捨五入
同時less還允許帶單位。
percentage 方法，將數組轉換爲百分比。（不常用）
max，min等方法也是支持的。並且允許帶單位，同時結果單位以選中的結果單位爲準，

## 色彩方法

• 色彩的創建方法
• 色彩通道方法
• 色彩的操作方法

• 色彩的混合方法

  色彩的創建方法

  根據色彩模式提出的

  RGB(red,green,blue)

  • red : 表示紅色通道 0-255 or 0-100%
  • green : 表示綠色通道 0-255 or 0-100%
  • blue : 表示藍色通道 0-255 or 0-100%

  RGBA(red,green,blue，alpha)

  • red : 表示紅色通道 0-255 or 0-100%
  • green : 表示綠色通道 0-255 or 0-100%
  • blue : 表示藍色通道 0-255 or 0-100%
  • alpha：表示透明度通道0-1 or 0-100%

  HSL(hue，saturation,lightness)

  • hue : 表示色相 0-360
  • saturation : 表示飽和度 0-1 or 0-100%
  • lightness : 表示亮度 0-1 or 0-100%

  色彩通道方法

• RGBA 模式的顏色有四哥通道，紅色綠色藍色以及alpha構成。因此Less提供了一下方法用於獲取四個通道的數值。
  
  • red 獲得紅色通道
    
    • green 獲得綠色通道
    • blue 獲得藍色通道
    • alpha 獲得透明度
• HSL模式提供了相對應獲取色相飽和度亮度的通道。
• hue 獲得色相
• saturation 獲得飽和度通道
• ligntness 獲得亮度通道

// less
@primary-color: #d9d9d9;

.dd {
  width:red(@primary-color)
}
// css
.dd {
  width: 217;
}

色彩操作方法

Less提供了簡單的方法用來操作顏色。如下：

• fadein 相對調高透明度
• fadeout 相對調低透明度
• fade 絕對 調整透明度到某一個值

 // less
 @color: #aaaaaa;
.dd {
  background-color: @color;
  &div {
    color: fade(@color, 30%);
  }
}
//css
.dd {
  background-color: #aaaaaa;
}
.dd.dddiv {
  color: rgba(170, 170, 170, 0.3);
}

同時HSL 模式下，飽和度以及亮度都是可以調節的，LESS 提供相應的方法。

• saturate 調高飽和度
• desaturate 調低飽和度
• lighten 提高亮度
• darken 降低飽和度

色彩混合

less 提供了混合色彩的方法，將兩個顏色進行混合
mix（color1，color2，weight）

// less
@color1: #112233;
@color2: #332211;
.dd {
  background-color: @color1;
  color: @color2;
  &&li {
    background-color: mix(@color1, @color2);
  }
}

// css
.dd {
  background-color: #112233;
  color: #332211;
}
.dd.ddli {
  background-color: #222222;
}

避免編譯

less 會將自己識別出的語法進行編譯，但是有時我們不需要對某一些語法進行編譯，LESS 提供了避免編譯的方法。

 ddd {
  width: calc(300px-30px);
}
//會被編譯爲
ddd {
  width: calc(270px);
}

爲了避免這種情況發生，可以在表達式中加入波折號，並將表達式用單雙引號引起來

 ddd {
  width: `'calc(300px-30px)';
}
//會被編譯爲
ddd {
 width: calc(300px-30px);
}