css - 将属性传递给 less 函数

Question

我正在尝试编写一个处理不同屏幕尺寸的混合。我想让它尽可能通用以尝试遵循 DRY 原则。

到目前为止我已经尝试过:

.vary_width(@prop, @val1, @val2, @val3) {
    @media(max-width: 1023px) {
        @{prop}: @val1;
    }
    @media(min-width: 1024px) {
        @{prop}: @val2;
    }
    @media(min-width: 1080px) {
        @{prop}: @val3;
    }
}

编译失败。我也尝试了一个建议(尽管我认为它针对的是版本 >1.4)使用 Ignore: ~"a;@{prop}:@{value}"; 命令，这也不起作用，在 CSS 中编译为 Ignore: a;margin: 5px;。

非常感谢。

编辑:运行 lessc master.less master.css 时收到的错误:

ParseError: Unrecognised input in /path/to/file/mixins.less on line 46, column 16:
45     @media(max-width: 1023px) {
46         @{prop}: @val1;
47     }

Answer 1

我使用了错误版本的 lessc。感谢@seven-phases-max 的指导。