连接两个或多个变量的值
要将两个或多个变量的值连接成一个字符串并将其作为输出打印,我们需要使用插值。
以下 Less 代码,
#demo:after {
@var1: Hello;
@var2: World!!!;
content: "@{var1} @{var2}";
}
编译时会设置 “Hello World !!!” 作为 content
属性的价值。下面是编译的 CSS:
#demo:after {
content: "Hello World!!!";
}
如果两个或多个变量的值仅需要以空间分离的方式彼此相邻放置,则不需要插值。
#demo {
@top: 4px;
@right: 2px;
@bottom: 6px;
@left: 4px;
padding: @top @right @bottom @left;
}
编译上面的代码时,会生成以下 CSS。
#demo {
padding: 4px 2px 6px 4px;
}
当结果字符串需要在引号内时,变量值(或)之间不应有空格时,此方法将不起作用。对于这些情况,插值的使用是强制性的。