Using SASS styles inside <style jsx>

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.

[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.

[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.