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

Question

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

一个简单的例子:

/* 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 我有一个错误:

Uncaught TypeError: Cannot read property 'call' of undefined at webpack_require (bootstrap 6d4f623…:606) at fn (bootstrap 6d4f623…:130) at Object.256 (index.css?e835:4) at Object. (bootstrap 6d4f623…:23) at webpack_require (bootstrap 6d4f623…:606) at fn (bootstrap 6d4f623…:130) at Object. (index.js:3) at Object. (client.js:2804) at Object.254 (client.js:2805) at 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;
    }
}