Less 从字符串中定义较少的变量

我试图编写一个mixin，它返回一个用于将px转换为em的变量。我尝试了一些东西，但最终我想调用一个mixin，并获得一个类似于SASS函数的返回值。基于此处的返回值：，我只能将变量定义一次作为返回值。例如：

Mixin

.px-to-emz( @size, @base: @font-size-base ){
    @em: round( unit( (@size / @base), ~"em" ), 3 );
}

称之为：

.foo {
    font-size: @em;
    .px-to-emz(10, 16px);

    height: @em;
    .px-to-emz(200, 16px);
}

.px-to-ems( @size, @var: 'em', @base: @font-size-base ){
    ~'@{var}': round( unit( (@size / @base), ~"em" ), 3 );
}

.foo {
    font-size: @font-size;
    .px-to-ems(10, 'font-size', 16px);

    height: @height;
    .px-to-ems(200, 'height', 16px);
}

很好，如果您只想返回一个变量，但是如果我想返回多个变量，我需要定义新的变量名。这是我理想中想要做的

Mixin:

.foo {
    font-size: @em;
    .px-to-emz(10, 16px);

    height: @em;
    .px-to-emz(200, 16px);
}

.px-to-ems( @size, @var: 'em', @base: @font-size-base ){
    ~'@{var}': round( unit( (@size / @base), ~"em" ), 3 );
}

.foo {
    font-size: @font-size;
    .px-to-ems(10, 'font-size', 16px);

    height: @height;
    .px-to-ems(200, 'height', 16px);
}

称之为：

.foo {
    font-size: @em;
    .px-to-emz(10, 16px);

    height: @em;
    .px-to-emz(200, 16px);
}

.px-to-ems( @size, @var: 'em', @base: @font-size-base ){
    ~'@{var}': round( unit( (@size / @base), ~"em" ), 3 );
}

.foo {
    font-size: @font-size;
    .px-to-ems(10, 'font-size', 16px);

    height: @height;
    .px-to-ems(200, 'height', 16px);
}

#1 到目前为止，解决此问题的最佳方法是将每个mixin调用放入其自己的作用域中：

.px到ems（@size，@base:@font-size-base）{
@-：圆形（单位（@size/@base），em），3；
}
傅先生{
.-（）{font size:@-；.px到ems（1016px）}
.-（）{高度：@-；.px到ems（20016px）}
.-;
}

用您认为合适的标识符替换

@-

和

-

#2 另一种方法是使用最近添加的（小于1.6.x）特性插值功能：

.px到ems（@property，@size，@base:@font-size-base）{
@{property}：圆形（单位（@size/@base），em），3；
}
傅先生{
.px至ems（字体大小10，16px）；
.px至ems（高度200，16px）；
}

如果只需要将“函数”结果指定给属性，那么它比#1更干净