CSS 轉 LESS 是將標準的 CSS（層疊樣式表） 代碼轉換為 LESS（一種 CSS 預處理器語言）的過程。LESS 增強了 CSS，加入了變數、嵌套規則、函數等功能，使得樣式表的編寫更具動態性和可維護性。
LESS 的優勢：
變數：可以定義變數來重用顏色、字體等樣式屬性，避免重複。
嵌套：支持嵌套的 CSS 規則，可以模擬 HTML 標籤的結構，從而讓樣式結構更加清晰。
運算：可以進行數學運算，像是顏色值、寬度、字體大小等數值計算。
混入（Mixin）：可以將常用的 CSS 代碼封裝成一個"混入"，重複使用。
CSS 示例：
css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #555;
line-height: 1.6;
}
轉換為 LESS：
less
@font-family: Arial, sans-serif;
@bg-color: #f0f0f0;
@text-color: #333;
@para-color: #555;
body {
font-family: @font-family;
background-color: @bg-color;
}
h1 {
color: @text-color;
font-size: 2em;
}
p {
color: @para-color;
line-height: 1.6;
}
LESS 語法特色：
變數：可以定義變數，如 @font-family: Arial;，這樣在其他地方使用該變數，便於管理和維護樣式。
嵌套：可以在父級樣式中嵌套子級樣式，這樣有助於保持 CSS 結構清晰。例如：
less
.container {
width: 100%;
.header {
background: #333;
}
.content {
padding: 20px;
}
}
運算：LESS 支持簡單的數學運算，這樣可以動態計算顏色值、寬度、高度等：
less
@base-size: 10px;
.box {
width: @base-size * 10;
}