Less變量詳解
Less 變量是一種非常有用的特性，可以幫助我們避免在樣式中多次使用相同的屬性值。通過在 Less 中定義變量，我們可以輕松地在樣式中重復使用這些值，并且在需要修改這些值時，只需要更新變量的值即可。
基本用法
Less 變量的定義語法如下：
@variable-name:?variable-value;
其中，變量名以?
@
?開頭，變量值可以是任何 CSS 屬性值，如顏色、長度、字體等。下面是一個例子：
@primary-color: #007bff;
body {
background-color: @primary-color;
}
上面的例子中，我們定義了一個?
@primary-color
?變量，并將其值設為?
#007bff
。然后在 body 元素的樣式中使用了這個變量，將背景色設置為了?
@primary-color
?的值。
編譯結果：
body {
background-color: #007bff;
}
除了單獨使用變量，Less 還支持在變量定義時使用其他變量。例如：
@primary-color: #007bff;
@secondary-color: darken(@primary-color, 10%);
body {
background-color: @secondary-color;
}
上面的例子中，我們定義了兩個變量：
@primary-color
?和?
@secondary-color
。在?
@secondary-color
?的定義中，我們使用了 Less 內(nèi)置的?
darken()
?函數(shù)，將?
@primary-color
?的值變暗了 10%。然后在樣式中使用了?
@secondary-color
?的值作為 body 元素的背景色。
編譯結果：
body {
background-color: #0062cc;
}
用作屬性或選擇器
在 Less 中，變量如果用作屬性控制，則需要用
@{vars}
這種形式編寫。例如：
@primary-color: #007bff;
@selector: body;
@props: background;
@{selector} {
@{props}-color: @primary-color;
}
.box-@{selector} {
@{props}: none;
}
這段示例中，我們定義了?
@primary-color
?變量，將其值設為?
#007bff
，然后，定義了兩個變量?
@selector
?和?
@props
，分別用于存儲選擇器和屬性名。這里將?
@selector
?定義為?
body
，
@props
?定義為?
background
。
接著，我們使用變量插值的方式在樣式中動態(tài)生成選擇器和屬性名。具體來說，在?
@{selector}
?中使用了?
@{props}-color
，這樣就生成了?
background-color
?屬性。然后將其值設置為?
@primary-color
。
最后，還使用了變量插值的方式動態(tài)生成了一個類名。類名為?
box-@{selector}
，即?
box-body
，并將其?
@props
?屬性設置為?
none
。
編譯結果為:
body {
background-color: #007bff;
}
.box-body {
background: none;
}
變量插值
在 Less 中，可以使用變量插值的方式將變量的值嵌入到其他字符串中。例如：
@asset-path: '/path/to/assets';
body {
background-image: url('@{asset-path}/bg.png');
}
上面的例子中，我們定義了一個?
@asset-path
?變量，它的值是一個包含了路徑信息的字符串。在 body 元素的樣式中，我們使用了?
url()
?函數(shù)來加載一個背景圖片，URL 地址中使用了變量插值的方式將?
@asset-path
?變量的值嵌入到字符串中。
局部變量
在 Less 中，可以在任何一個樣式塊內(nèi)部定義一個局部變量，這個變量只在該樣式塊內(nèi)部有效，不會影響到其他地方的同名變量。例如：
@primary-color: #007bff;
body {
@primary-color: #6c757d;
background-color: @primary-color;
}
h1 {
color: @primary-color;
}
上面的例子中，我們在 body 元素的樣式中重新定義了?
@primary-color
?變量的值，將其變?yōu)榱?
#6c757d
。在該樣式塊中，
@primary-color
?變量只在該塊內(nèi)有效，不會影響到其他地方的同名變量。因此，body 元素的背景色將是?
#6c757d
，而 h1 元素的顏色還是原來的?
#007bff
。
編譯結果：
body {
background-color: #6c757d;
}
h1 {
color: #007bff;
}
另外，less變量還有延遲加載的特性，參考我的另一篇文章《less變量的延遲加載》
避免編譯
width: ~'calc(100% - 10px)';
height: ~'calc(100vh - 20px)';
這段 Less 代碼展示了如何將?
calc()
?函數(shù)作為字符串插入到樣式中。
在 CSS 中，
calc()
?函數(shù)用于執(zhí)行數(shù)學計算，可以在屬性中使用。但是，在 Less 中，如果直接使用?
calc()
?函數(shù)，會被編譯為 CSS，而不是 Less。為了讓 Less 保持對?
calc()
?函數(shù)的支持，我們需要將其作為字符串插入到樣式中。
具體來說，這段代碼中，使用了?
~'...'
?的語法，將?
calc()
?函數(shù)作為字符串插入到了樣式中。其中，
~
?表示將后面的字符串視為普通的 CSS 代碼，而不是 Less 代碼。通過這種方式，我們可以將?
calc()
?函數(shù)作為字符串插入到樣式中，使其在編譯時不被解析為 CSS。
在具體的樣式中，我們將?
width
?屬性設置為?
calc(100% - 10px)
，表示寬度為父元素寬度減去 10 個像素。將?
height
?屬性設置為?
calc(100vh - 20px)
，表示高度為視口高度減去 20 個像素。這種方式可以讓我們在編寫響應式布局時更加靈活地控制元素的寬高。
編譯結果：
width: calc(100% - 10px);
height: calc(100vh - 20px);
變量嵌套/拼接變量
Less中允許拼接變量的字面量，具體案例如下：
@state-primary-text: #ff0000;
@state-primary-bg: #eeaaaa;
@state-warning-text: #00ff00;
@state-warning-bg: #aaeeaa;
@colors-info: primary, warning;
.alert-variant(@color-bg, @color-text) {
color: @color-text;
background-color: @color-bg;
}
each(@colors-info, {
.alert-@{value} {
@color-bg: ~'state-@{value}-bg';
@color-text: ~'state-@{value}-text';
.alert-variant(@@color-bg, @@color-text);
}
})
這里定義了四個顏色變量和一個包含兩種顏色類型的數(shù)組。
alert-variant
?是一個接受兩個參數(shù)的混合，用于設置警報消息的背景色和文本顏色。
使用 each 循環(huán)語句，遍歷?
colors-info
?數(shù)組，并為每個數(shù)組元素定義一個對應的警報消息類名。在循環(huán)中，將?
@colors-bg
?和?
@colors-text
?賦值為對應顏色類型的變量（例如，對于?
primary
?類型，
@color-bg
?將被賦值為?
@state-primary-bg
）。然后，將這兩個變量作為參數(shù)傳遞給?
alert-variant
?混合，即設置了當前警報消息類名的背景色和文本顏色。具體地，通過?
~'state-@{value}-bg'
?和?
~'state-@{value}-text'
?將變量名字符串化，從而在混合內(nèi)部動態(tài)獲取對應的變量值。最后，警報消息的類名將被設置為?
alert-primary
?或?
alert-warning
，以對應不同的顏色類型。
編譯結果：
.alert-primary {
background-color: #eaa;
color: red;
}
.alert-warning {
background-color: #aea;
color: #0f0;
}
總的來說，Less 變量是一種非常方便的特性，可以幫助我們更好地組織和管理樣式代碼，并提高代碼的可維護性和重用性。