Less 教學：邏輯、迴圈、函式

這篇教學會介紹 Less 進階的功能，例如邏輯、迴圈和一些特殊函式，這些功能主要針對大型或複雜的 CSS 架構，在簡單的小型專案通常派不上用場，但如果熟悉相關用法，就能大幅簡化或加速開發流程。

快速導覽：

Less 邏輯判斷式 ( when )

Less 邏輯判斷式 ( if )

Less 迴圈 ( 遞迴混合 )

Less 迴圈 ( each + range )

Less 常用函式

CSS 教學 - Less 教學：邏輯、迴圈、函式

Less 邏輯判斷式 ( when )

Less 的邏輯判斷式主要有「when」和「if」兩種，when 判斷式撰寫在「選擇器後方」，寫法為 when(判斷條件)，當判斷條件結果為 True 時就會轉換這組樣式，下方範例會判斷變數 @a 是否大於 0，如果大於 0 才會轉換這組樣式。

/********** Less 寫法 **********/
@a: 1;
.apple when(@a>0){
  color: red;
}
.oxxo when(@a<0){
  color: red;        /* 不會轉換這組樣式，因為 @a 為 1 */
}


/********** 轉換成 CSS **********/
.apple {color: red;}

Less 邏輯判斷式也適用具有「參數」的 Mixins 混合效果，下方範例會判斷變數 @a 是否大於 0，如果大於 0 才會混合並轉換這組樣式。

更多參考：Less Mixins 混合

/********** Less 寫法 **********/
.apple(@a) when(@a>0){
  color: red;
  font-size: 20px;
  background: pink;
}
.oxxo {
  @a: 1;
  .apple(@a);
}
.banana {
  @a: 2;
  .apple(@a);
}
.coconut {
  @a: 0;
  .apple(@a);
}

/********** 轉換成 CSS **********/
.oxxo {
  color: red;
  font-size: 20px;
  background: pink;
}
.banana {
  color: red;
  font-size: 20px;
  background: pink;
}

Less 邏輯判斷式 ( if )

Less 的 if 邏輯判斷式為 Less 的「函式」，撰寫在「樣式中」，寫法為 if(條件判斷, True 行為, False 行為)，當判斷條件結果為 True 時就會轉換這組樣式，下方範例會判斷變數 @a 是否大於 0，如果大於 0 就會使用紅色，不然就使用藍色。

/********** Less 寫法 **********/
@a: 1;
.oxxo {
  color: if(@a>0, red, blue);
}
.apple {
  color: if(@a<0, red, blue);
}


/********** 轉換成 CSS **********/
.oxxo {color: red;}
.apple {color: blue;}

Less 迴圈 ( 遞迴混合 )

Less 本身並沒有「迴圈」的機制，但在混合時可以透過「遞迴」的做法 ( 混合的對象中混合了自己本身 )，產生類似迴圈的效果，下方範例會透過遞迴的方式，產生五個 width 樣式屬性。

/********** Less 寫法 **********/
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 再次呼叫自己
  width: (10px * @counter); // 根據變數產生對應屬性值
}
div {
  .loop(5);
}


/********** 轉換成 CSS **********/
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

上述的寫法並沒有意義，因為在同一個選擇器中並不會撰寫一堆相同的樣式，所以 Less 遞迴常見於將「類似名稱的選擇器」產生「對應內容」，下方範例會重複執行 .oxxo 四次，每次產生一個 column-* 的選擇器，並根據算式產生樣式內容。

/********** Less 寫法 **********/
.oxxo(4);
.oxxo(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .oxxo(@n, (@i + 1));
}


/********** 轉換成 CSS **********/
.column-1 {width: 25%;}
.column-2 {width: 50%;}
.column-3 {width: 75%;}
.column-4 {width: 100%;}

Less 迴圈 ( each + range )

延續上方的範例，如果不想要透過計算的方式進行迴圈，也可以使用 Less 的 each 和 range 函式，做出更類似程式的迴圈語法，快速產生具有規律的系列數字，range 函式的寫法如下：

range(起始值, 結束值, 間距)

range(結束值, 間距)，起始值為 0。

range(結束值)，起始值為 0，間距為 1。

下方範例會展示這三種不同寫法產生的結果。

/********** Less 寫法 **********/
@a: range(10);
@b: range(5, 10);
@c: range(1, 10, 2);
.oxxo::before {
  content: "@{a}";
}
.apple::before {
  content: "@{b}";
}
.banana::before {
  content: "@{c}";
}


/********** 轉換成 CSS **********/
.oxxo::before {
  content: "1 2 3 4 5 6 7 8 9 10";  /* range(10) */
}
.apple::before {
  content: "5 6 7 8 9 10";  /* range(5, 10) */
}
.banana::before {
  content: "1 3 5 7 9";     /* range(1, 10, 2) */
}

通常使用 range 會搭配 each 一同使用，each 表示分別執行每次的內容，每次執行的結果都會放入一個名為 value 的變數裡，使用 Less 變數讀取的方式就能操作，下方會呈現兩種不同的 each 寫法，一種放在選擇器裡就能重複產生樣式，另一種放在選擇器外層會重複產生選擇器。

/********** Less 寫法 **********/
.apple::before {
  each(range(4), {
  content: @value;       /* 數字 */
  });
}
.apple::after {
  each(range(4), {
  content: "@{value}";   /* 字串，有引號 */
  });
}
each(range(4), {
  .oxxo-@{value}::before {
  content: @value;       /* 數字 */
  }
  .oxxo-@{value}::after {
  content: "@{value}";   /* 字串，有引號 */
  }
});


/********** 轉換成 CSS **********/
.apple::before {
  content: 1;
  content: 2;
  content: 3;
  content: 4;
}
.apple::after {
  content: "1";
  content: "2";
  content: "3";
  content: "4";
}
.oxxo-1::before {content: 1;}
.oxxo-1::after {content: "1";}
.oxxo-2::before { content: 2;}
.oxxo-2::after {content: "2";}
.oxxo-3::before {content: 3;}
.oxxo-3::after {content: "3";}
.oxxo-4::before {content: 4;}
.oxxo-4::after {content: "4";}

Less 常用函式

Less 除了基本的巢狀結構、變數、Extend 或 Mixins 混合等功能，還額外提供了許多好用的函式，下方會列出一些常用的函式，完整函式可以參考 Less 官方網站「Less Functions」。

獲取圖片尺寸

image-width、image-height 和 image-size 這三個函式可取得圖片的長寬尺寸，轉換成實際的數值。

/********** Less 寫法 **********/
.img {
    width: image-width("../img/less-logo.png");
    height: image-height("../img/less-logo.png");
    margin: image-size("../img/less-logo.png");
}

/********** 轉換成 CSS **********/
.img {
  width: 199px;
  height: 81px;
  margin: 199px 81px;
}

單位轉換

convert 函式可以轉換各種單位，例如長度單位 m、cm、mm、in、pt、pc，時間單位 s、ms，角度單位 rad、deg、grad 和 turn。

/********** Less 寫法 **********/
.img {
    width:convert(9s, "ms");
    height:convert(14cm, mm);
    margin:convert(8, mm);
}

/********** 轉換成 CSS **********/
.img {
  width: 9000ms;
  height: 140mm;
  margin: 8;
}

陣列

extract 函式可以讀取陣列的項目，當 Less 變數裡是陣列項目時，可以透過 extract 讀取，注意讀取時陣列的第一個項目序號為 1 不是常用的 0。

/********** Less 寫法 **********/
@list: red, blue, green, yellow;
.list{
    color: extract(@list, 1);
    border-color: extract(@list, 2);
    background-color: extract(@list, 3);
}

/********** 轉換成 CSS **********/
.list {
  color: red;
  border-color: blue;
  background-color: green;
}

數學計算

Less 提供多種數學計算函式，例如 sqrt、abs、sin、pow、max、min 等等，可以快速產生想要的數值。

/********** Less 寫法 **********/
.math{
  width:sqrt(25cm);
  width:abs(-18.6%);
  width:sin(1deg);
  width:pow(25, -2);
  width:max(5, 10);
  width:min(5, 10);
  width:percentage(0.5);
  width:round(1.67);
  width:round(1.67, 1);
}

/********** 轉換成 CSS **********/
.math {
  width: 5cm;
  width: 18.6%;
  width: 0.01745241;
  width: 0.0016;
  width: 10;
  width: 5;
  width: 50%;
  width: 2;
  width: 1.7;
}

色彩轉換

Less 提供多種色彩計算函式，可以從某一組特定的顏色，去產生各種對應的顏色，當遇到要修改顏色時，只需要修改一次即可。

/********** Less 寫法 **********/
@color: #cc8888;
/* 色彩轉換 */
.color {
  color: rgb(90, 23, 148);
}
/* 顏色調整-飽和度 */
.color-saturate {
  color: saturate(@color, 10%);
  color: saturate(@color, -10%);
}
/* 顏色調整-不飽和度 */
.color-desaturate {
  color: desaturate(@color, 10%);
  color: desaturate(@color, -10%);
}
/* 顏色調整-變亮 */
.color-lighten {
  color: lighten(@color, 10%);
  color: lighten(@color, -10%);
}
/* 顏色調整-變暗 */
.color-darken {
  color: darken(@color, 10%);
  color: darken(@color, -10%);
}
/* 顏色調整-灰階 */
.color-darken {
  color: greyscale(@color);
}
/* 顏色混合 */
.color-mix {
  color: mix(@color, #00f, 50%);
  color: mix(@color, #00f, 20%);
  color: mix(@color, #00f, 80%);
}

/********** 轉換成 CSS **********/
/* 色彩轉換 */
.color {
  color: #5a1794;
}
/* 顏色調整-飽和度 */
.color-saturate {
  color: #d58080;
  color: #c49191;
}
/* 顏色調整-不飽和度 */
.color-desaturate {
  color: #c49191;
  color: #d58080;
}
/* 顏色調整-變亮 */
.color-lighten {
  color: #dbacac;
  color: #bd6464;
}
/* 顏色調整-變暗 */
.color-darken {
  color: #bd6464;
  color: #dbacac;
}
/* 顏色調整-灰階 */
.color-darken {
  color: #aaaaaa;
}
/* 顏色混合 */
.color-mix {
  color: #6644c4;
  color: #291be7;
  color: #a36da0;
}

小結

這篇教學所介紹的 Less 邏輯判斷、迴圈和常用函式，都是在大型專案中會看見的技巧和用法，如果運用得當，就能開發得更為快速，也更容易管理相關的樣式檔案。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

Less 教學：邏輯、迴圈、函式

Less 邏輯判斷式 ( when )

Less 邏輯判斷式 ( if )

Less 迴圈 ( 遞迴混合 )

Less 迴圈 ( each + range )

Less 常用函式

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

規則與定義

函式類型

顏色與濾鏡

文字與段落

元素容器

背景與陰影

清單與表格

基本排版與定位

Flex 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩

視窗與使用者行為

CSS 預處理器

範例效果