// 定义变量
@primary-color: #3498db;
@font-size: 16px;
// 使用变量
body {
color: @primary-color;
font-size: @font-size;
}
在这个例子中，@primary-color 和 @font-size 是两个 Less 变量，分别存储颜色值和字体大小。在样式规则中，可以通过变量名引用这些值。
变量插值：
Less 还支持变量插值，可以在字符串中嵌入变量的值。插值使用 ${} 符号包裹变量名。
@base-url: "/images";
@image-name: "example.jpg";
// 使用变量插值
.background-image {
background-image: url("@{base-url}/@{image-name}");
}
在这个例子中，@{base-url} 和 @{image-name} 是插值语法，它们会被编译成对应的变量的值。
变量作用域：
Less 中的变量分为全局变量和局部变量。全局变量在整个样式表中可见，而局部变量只在定义它们的规则块或混合内可见。局部变量使用在混合（Mixin）中时非常有用。
// 全局变量
@global-var: red;
.my-mixin {
// 局部变量
@local-var: blue;
// 使用全局和局部变量
color: @global-var; // 可以访问全局变量
background-color: @local-var; // 可以访问局部变量
}
.my-element {
// 无法访问 @local-var，因为它是在另一个块内定义的
}
在这个例子中，@global-var 是全局变量，而 @local-var 是局部变量，只能在 .my-mixin 内部访问。
转载请注明出处：http://www.zyzy.cn/article/detail/4288/Less