Less变量详解
共 9083字，需浏览 19分钟
·
2023-06-16 06:34
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 内置的
darken()
函数，将
@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
。
接着，我们使用变量插值的方式在样式中动态生成选择器和属性名。具体来说，在
@{selector}
中使用了
@{props}-color
，这样就生成了
background-color
属性。然后将其值设置为
@primary-color
。
最后，还使用了变量插值的方式动态生成了一个类名。类名为
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()
函数来加载一个背景图片，URL 地址中使用了变量插值的方式将
@asset-path
变量的值嵌入到字符串中。
局部变量
在 Less 中，可以在任何一个样式块内部定义一个局部变量，这个变量只在该样式块内部有效，不会影响到其他地方的同名变量。例如：
@primary-color: #007bff;
body {
@primary-color: #6c757d;
background-color: @primary-color;
}
h1 {
color: @primary-color;
}
上面的例子中，我们在 body 元素的样式中重新定义了
@primary-color
变量的值，将其变为了
#6c757d
。在该样式块中，
@primary-color
变量只在该块内有效，不会影响到其他地方的同名变量。因此，body 元素的背景色将是
#6c757d
，而 h1 元素的颜色还是原来的
#007bff
。
编译结果：
body {
background-color: #6c757d;
}
h1 {
color: #007bff;
}
另外，less变量还有延迟加载的特性，参考我的另一篇文章《less变量的延迟加载》
避免编译
width: ~'calc(100% - 10px)';
height: ~'calc(100vh - 20px)';
这段 Less 代码展示了如何将
calc()
函数作为字符串插入到样式中。
在 CSS 中，
calc()
函数用于执行数学计算，可以在属性中使用。但是，在 Less 中，如果直接使用
calc()
函数，会被编译为 CSS，而不是 Less。为了让 Less 保持对
calc()
函数的支持，我们需要将其作为字符串插入到样式中。
具体来说，这段代码中，使用了
~'...'
的语法，将
calc()
函数作为字符串插入到了样式中。其中，
~
表示将后面的字符串视为普通的 CSS 代码，而不是 Less 代码。通过这种方式，我们可以将
calc()
函数作为字符串插入到样式中，使其在编译时不被解析为 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);
}
})
这里定义了四个颜色变量和一个包含两种颜色类型的数组。
alert-variant
是一个接受两个参数的混合，用于设置警报消息的背景色和文本颜色。
使用 each 循环语句，遍历
colors-info
数组，并为每个数组元素定义一个对应的警报消息类名。在循环中，将
@colors-bg
和
@colors-text
赋值为对应颜色类型的变量（例如，对于
primary
类型，
@color-bg
将被赋值为
@state-primary-bg
）。然后，将这两个变量作为参数传递给
alert-variant
混合，即设置了当前警报消息类名的背景色和文本颜色。具体地，通过
~'state-@{value}-bg'
和
~'state-@{value}-text'
将变量名字符串化，从而在混合内部动态获取对应的变量值。最后，警报消息的类名将被设置为
alert-primary
或
alert-warning
，以对应不同的颜色类型。
编译结果：
.alert-primary {
background-color: #eaa;
color: red;
}
.alert-warning {
background-color: #aea;
color: #0f0;
}
总的来说，Less 变量是一种非常方便的特性，可以帮助我们更好地组织和管理样式代码，并提高代码的可维护性和重用性。