Using SASS styles inside <style jsx>

[vladejs]

Is that possible? I am used to SASS and want to use it in my next app.
Currently, I have this code:

p {
    color: red;
}

p.span {
  color: blue;
}

And I wanna make it like this:

p {
    color: red;

    &.span {
      color: blue;
    }
}

If I do that, it doesn't throws errors, but the indented style gets ignored.

[giuseppeg]

Not yet but it might be very soon thanks to #190

[vladejs]

Currently, if I import a SASS file I get it compiled thanxs to webpack, but I don't know if I can do this:

import React from 'react'
import buttonStyles from './button.scss'

export default props => (<div>
  <p>
    Hello Sr
  </p>
  <style jsx>
    {`${buttonStyles}`}
  </style>
</div>)

[giuseppeg]

you can but they won't be scoped

[vladejs]

So there's no way to make it scoped?

[giuseppeg]

no yet, but with Plugins it will be possible and very easy.

[vladejs]

thanks, but how long do I need to wait in order to use plugins? 2017-05-22 12:49 GMT-04:00 Giuseppe <notifications@github.com>:

…

no yet, but with Plugins it will be possible and very easy. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#205 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMDUAgbNP75xbX2ztTVUhvbJurQTV19_ks5r8byAgaJpZM4Nif3V> .

[giuseppeg]

@vladejs I already have a Pull Request ready but we won't include it in the next release yet. So my guess is that probably in a couple of weeks we will be able to release a version that introduces plugins.

[pexxi]

This would be an awesome addition. Any news on this?

[giuseppeg]

@pexxi we might have to postpone this feature to when dynamic styles support is implemented (#81).

[fredsh]

Hello, not sure this is the right place for this question.
I am using styled jsx with the sass plugin. Works well but I have encountered a small issue trying to use js variable inside the style.
It seems that simple variable use works for simple values, but not when used in more complex case like parameter of a mixin.
Below is a small example of what I am trying to do. The color is applied correctly but the media query will not work as expected (always evaluates to true).
`
const bp = 'medium'
const col = 'yellow'

    <style jsx>{`
      @import 'styles/css/foundation.scss';
      .layout{
        width: 100%;
        @include breakpoint($bp) {
          max-width: 80%;
          background-color: ${col};
        }
      }
      `}</style>

`

I have seen this in the readme

Plugins won't transform expressions

If I understand correctly, what I want to do is currently not supported right? Is there any plan to support this in the future? And if I wanted to help support this, where should I look?
By the way, thanks for the great work.

[cristianzamar]

@fredsh I'm testing the same styled-jsx plugin and I can't get the imported .scss files to hot-reload or even reload with a page refresh. Have you achieve that??

[HansUXdev]

Any update on this?

Or atleast using postcss plugins for css nesting and container-query?

With javascript functions and variables, we don't really need css vars (and the ugly syntax) or mixins but nesting and container query support would be very nice.

[adam-zhu]

Hello, not sure this is the right place for this question.
I am using styled jsx with the sass plugin. Works well but I have encountered a small issue trying to use js variable inside the style.
It seems that simple variable use works for simple values, but not when used in more complex case like parameter of a mixin.
Below is a small example of what I am trying to do. The color is applied correctly but the media query will not work as expected (always evaluates to true).

 <style jsx>{`
   @import 'styles/css/foundation.scss';
   .layout{
     width: 100%;
     @include breakpoint($bp) { // 👈🤏👀 `$${bp}`?
       max-width: 80%;
       background-color: ${col};
     }
   }
   `}</style>

This is a non-issue. Javascript vars are 👍, and only suffer the same dynamic limitations as styled-jsx itself (build time execution, not run time).