Using with SCSS/LESS/Stylus-based frameworks

First of all, thanks everyone for the project. It is awesome, the best css-in-js implementation at the moment to my mind.

But I can’t get rid of CSS frameworks written with preprocessors yet. In my case this is Zurb Foundation, it provides an awesome grid and lots of useful SCSS mixins, for example for media queries:

@media #{$medium-only} {
    hey: ho;
}

But how can I use it in conjunction with styled-components? Does anybody use such a config?

[kevinsalinas]

Would be very useful to recognize variable names from a file written in one of these frameworks and use them in the styled components. In this way we can modify the look and feel of our apps easily.

For example: //variables.scss $background: red;

//index.js import ‘variables.scss’;

export default styled(App)` Background: $background; `;

[yantakus]

Ah, sorry, I meant there are difficulties, not problems. The idea itself is superb. But for developers used to CSS-preprocessors it changes the workflow significantly. So we should evolve and popularize the idea.

Also, I think using third-party components with plain stylesheets along with styled-components will be a mess. And it’s a lot of work to write all the styles from scratch.