0

I just moved from SCSS to PostCSS with Webpack and I'm wondering if it's possible to create custom properties dynamically.

A simple example:

/* 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;
    };
}

I searched for PreCSS, installed it and it works on simple @for, but with --properties I have an error:

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)

Thanks.

sandrina-p
  • 3,794
  • 8
  • 32
  • 60

1 Answers1

0

I used: https://www.npmjs.com/package/postcss-for

@for $i from 1 to 15 {
    --layout-flex-$(i): {
        flex: $i;
    }
}
Vincent
  • 204
  • 1
  • 12
  • That's what i tried and have this error: `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)` – sandrina-p Jan 18 '17 at 15:46
  • I'm sorry, my knowledge ends here, I never used wepback with boostrap and postcss... :( – Vincent Jan 18 '17 at 15:49
  • Right. Thanks anyway – sandrina-p Jan 18 '17 at 15:51