Less 教學：變數、import
雖然原生的 CSS 已經有變數和 import 等功能，但 Less 在這些功能上表現得又更為強大，這篇教學會介紹如何在 Less 中使用變數和 import。
快速導覽：
Less 變數
原生 CSS 使用「--」開頭作為變數或自訂屬性的識別符號，而 Less 則是使用「@」開頭作為變數的識別符號，變數名稱按照基命名規則，*使用英文字母大小寫開頭，可搭配數字或底線，使用變數雖然很簡單，但 Less 變數和原生 CSS 變數有「本質差異」：
CSS 變數：直接在 CSS 中使用，在純 CSS 中「會」看到變數名稱，參考「CSS 變數」。 Less 變數：轉換成 CSS 之後會變成對應的數值，在純 CSS 中「不會」看到變數名稱。
Less 變數替換屬性值
Less 變數的數值可放入 CSS 各種屬性值，轉換後會將這些數值放入對應的位置。
/********** Less 寫法 **********/
@color1: blue;
@color2: red;
@size30: 30px;
a {color: @color1;}
a:hover {color: @color2;}
h2 {font-size: 30px;}
/********** 轉換成 CSS **********/
a {color: blue;}
a:hover {color: red;}
h2 {font-size: 30px;}
Less 變數替換選擇器名稱或內容
Less 變數除了可以取代屬性值，也可以使用「@{變數名稱}]」替代選擇器「名稱」，下方會將元素的 class 名稱替換為變數的寫法。
/********** Less 寫法 **********/
@name1: apple;
@name2: oxxo;
h2.@{name1} {color: red;} /* 注意替換名稱的寫法 */
h2.@{name1}-123 {color: blue;}
h2.@{name2} {font-size: 30px;}
h2.@{name2}-123 {font-size: 20px;}
/********** 轉換成 CSS **********/
h2.apple {color: red;}
h2.apple-123 {color: blue;}
h2.oxxo {font-size: 30px;}
h2.oxxo-123 { font-size: 20px;}
使用同樣的做法也可以替換屬性內容，下方的範例會將圖片 url() 的內容使用變數的方式呈現。
/********** Less 寫法 **********/
@website: "https://steam.oxxostudio.tw/";
.banner {
background: url("@{website}img/oxxo.jpg");
}
/********** 轉換成 CSS **********/
.banner {
background: url("https://steam.oxxostudio.tw/img/oxxo.jpg");
}
由於 Less 變數使用「字串」的方式替換內容，如果有比較複雜的需求 ( 例如漸層色 )，就需要採用替換變數替換變數內容的做法，才能產生正確的結果。
/********** Less 寫法 **********/
@name1: apple;
@name2: oxxo;
h2.@{name1} {color: red;} /* 注意替換名稱的寫法 */
h2.@{name1}-123 {color: blue;}
h2.@{name2} {font-size: 30px;}
h2.@{name2}-123 {font-size: 20px;}
/********** 轉換成 CSS **********/
h2.apple {color: red;}
h2.apple-123 {color: blue;}
h2.oxxo {font-size: 30px;}
h2.oxxo-123 { font-size: 20px;}
使用同樣的做法也可以替換屬性內容，下方的範例會將圖片 url() 的內容使用變數的方式呈現。
/********** Less 寫法 **********/
@color1: red;
@color2: blue;
@bg: linear-gradient(to right, @color1, @color2);
.main {
background: @bg;
}
/********** 轉換成 CSS **********/
.main {
background: linear-gradient(to right, red, blue);
}
Less 變數取值
Less 變數不一定要在使用之前宣告，使用後再宣告也不會發生錯誤，下方範例會在使用 @color 之後才宣告變數，仍然會產生正確的結果。
/********** Less 寫法 **********/
h1{color: @color}
@color: red; /* 放在後方才宣告 */
/********** 轉換成 CSS **********/
h1 {color: red;}
Less 的變數取值和 CSS 相同，會取用最靠近元素的變數，例如同層級有變數就會先採用這個變數，如果同層級沒有變數，就會向父層級取用變數，下方範例會展示不同層級中都有相同名稱但不同內容的變數，最後取用結果就會採用最靠近元素的變數。
/********** Less 寫法 **********/
@color: red;
.apple {
@color: blue;
color: @color;
.oxxo {
@color: green;
color: @color;
.banana {
@color: yellow;
h2 {
color: @color;
}
}
}
}
h2 {
color: @color;
}
/********** 轉換成 CSS **********/
.apple {color: blue;}
.apple .oxxo {color: green;}
.apple .oxxo .banana h2 {color: yellow;}
h2 {color: red;}
Less 變數可以賦值給不同的 Less 變數，也可以搭配原生的 CSS 變數共同使用，下方範例會呈現不同變數之間互相賦值的效果。
/********** Less 寫法 **********/
@color1: red;
@color2: @color1;
:root {
--oxxo: @color2;
@color3: var(--oxxo);
}
.apple {color: @color2;}
.oxxo {color: var(--oxxo);}
/********** 轉換成 CSS **********/
:root {--oxxo: red;}
.apple {color: red;}
.oxxo {color: var(--oxxo);}
Less 變數除了使用宣告的方式賦予數值，3.0 版本之後也可以使用「樣式」作為變數，使用方式需要改用「$」開頭作為識別符號，使用時同樣會取用最靠近元素的變數作為屬性值，下方範例會使用 color 樣式作為變數。
/********** Less 寫法 **********/
.apple {
color: red;
background-color: $color;
.oxxo {
background-color: $color;
.banana {
color: blue;
background-color: $color;
}
}
}
/********** 轉換成 CSS **********/
.apple {
color: red;
background-color: red;
}
.apple .oxxo {
background-color: red;
}
.apple .oxxo .banana {
color: blue;
background-color: blue;
}
Less 變數搭配 @media
@media 是使用 CSS 製作 RWD 網頁必備的技能，如果將 Less 變數搭配 @media，就能透過巢狀結構撰寫 @media，轉換後就會將 @media 獨立成原本 CSS 的格式。
/********** Less 寫法 **********/
@min768: (min-width: 768px);
@min1024: (min-width: 1024px);
.apple {
@media @min768 {
font-size: 1.2rem;
}
}
.oxxo {
@media @min1024 {
font-size: 1.2rem;
}
}
/********** 轉換成 CSS **********/
@media (min-width: 768px) {
.apple {
font-size: 1.2rem;
}
}
@media (min-width: 1024px) {
.oxxo {
font-size: 1.2rem;
}
}
如果巢狀結構中的 @media 裡還包覆著其他 @media，轉換後會自動變成 and 的形式。
/********** Less 寫法 **********/
@min768: (min-width: 768px);
@max1024: (max-width: 1024px);
.apple {
@media @min768 {
@media @max1024 {
font-size: 1.2rem;
}
}
}
/********** 轉換成 CSS **********/
@media (min-width: 768px) and (max-width: 1024px) {
.apple {
font-size: 1.2rem;
}
}
使用 @import 載入其他 Less 檔案
Less 和原生的 CSS 一樣都有提供「@import」功能，為了區隔和原生 CSS 的 @import，Less 額外提供「載入選項」的設定，使用的語法為「@import (選項) 載入的檔案」。
| 選項 | 說明 |
|---|---|
| reference | 使用 Less 檔案但不輸出它。 |
| inline | 在輸出中包含來源檔案但不對其進行處理。 |
| less | 將任何文件視為 Less 文件。 |
| css | 將任何文件視為 CSS 文件。 |
| once | ( 預設值 ) 僅包含檔案一次。 |
| multiple | 多次包含該檔案。 |
| optional | 找不到檔案時繼續編譯。 |
使用「once」選項預設值時，則後方名同的檔案就會被忽略。
/********** Less 寫法 **********/
@import "apple.less";
@import "apple.less"; /* 這行會被忽略 */
@import (once) "oxxo.less";
@import (once) "oxxo.less"; /* 這行會被忽略 */
如果使用「multiple」選項預設值時，則會重複載入相關內容。
/********** oxxo.less 內容 **********/
a {color: red;}
/********** Less 寫法 **********/
@import (multiple) "oxxo.less";
@import (multiple) "oxxo.less";
/********** 轉換成 CSS **********/
a {color: red;}
a {color: red;} /* 重複載入 */
如果要在 Less 中使用原生 CSS 的 @import，則需要特別標注「css」選項下方寫法：
/********** Less 寫法 **********/
@import (css) "oxxo.css";
/********** 轉換成 CSS **********/
@import "oxxo.css";
小結
這篇教學所介紹的 Less 變數用法，和原生 CSS 的變數有著本質上的不同，但相對來說如果程式碼非常複雜，使用 Less 變數就能大幅簡化這些程式碼，也更容易進行管理。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～