postcss - 在循环中创建自定义属性

Question

我刚刚使用SCSS从PostCSS移至Webpack，我想知道是否可以动态创建自定义属性。

一个简单的例子：

/* input */
:root {
    @for $i from 1 to 3 {
        --layout-flex-$(i): {
            flex: $i;
        }
    }      
}

/* output */
:root {

    --layout-flex-1: {
        flex: 1;
    };

    --layout-flex-2: {
        flex: 2;
    };

    --layout-flex-3: {
        flex: 3;
    };
}

我搜索了PreCSS，安装了它并且它适用于简单的@for，但是--properties我遇到了错误：

  

未捕获的TypeError：无法读取属性＆＃39; call＆＃39;在 webpack_require （bootstrap 6d4f623 ...：606）的未定义位于对象的Object.256（index.css？e835：4）处的fn（bootstrap 6d4f623 ...：130）处。 （bootstrap 6d4f623 ...：23）在 webpack_require （bootstrap 6d4f623 ...：606）at at fn（bootstrap 6d4f623 ...：130）。在Object处（index.js：3）。 （client.js：2804）at object.254（client.js：2805） webpack_require （bootstrap 6d4f623 ......：606）

感谢。

Answer 1

我用过：https://www.npmjs.com/package/postcss-for

@for $i from 1 to 15 {
    --layout-flex-$(i): {
        flex: $i;
    }
}