-2

I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with.

I would like to render SCSS like this

// myMixin.scss
@mixin myMixin {
    .myMixin {
        padding: 1rem;
        background: yellow;
    }
}

// main.scss
@import 'myMixin.scss';
$blue: #004AAD;

.button {
    .text {
        color: $blue;
    }
    @include myMixin;
}

And the output would look like this:

.button {
    .text {
        color: #004AAD;
    }
    .myMixin {
        padding: 1rem;
        background: yellow;
    }
}

Basically, I'd like a way to render everything in SCSS while keeping the original nesting. Is it possible? Thanks.

goo6
  • 39
  • 1
  • 3
  • 3
    The nesting feature is a part of SCSS. However, CSS that SCSS is compiled to, doesn't have nesting. so the final output will look like `.button .text {` and `.button .myMixin {`, without the nesting. – Invizi Sep 13 '21 at 01:03
  • in short - browsers understand CSS - not the hybrid whatever you want – Bravo Sep 13 '21 at 01:04
  • Can you explain why you need this? The “nesting” style is not valid CSS and won’t be interpreted by client browsers as you seem to expect it will. – esqew Sep 13 '21 at 01:04
  • @esqew I am creating a SCSS -> HTML plugin and need to first render SCSS -> CSS while keeping the nesting so I can then parse with PostCSS to then create an HTML tree with. My question seems meaningless without context so I guess I should have included context. – goo6 Sep 13 '21 at 01:10

2 Answers2

0

Nesting is specific to SCSS. Also I don't think @import is best practice, use @use instead.

https://sass-lang.com/documentation/at-rules/use

glani kali
  • 11
  • 2
0

Here is the thing our client(browsers) only support raw CSS and not SCSS, When you use SCSS it compiles down to raw CSS, And CSS doesn't have inbuilt Nesting feature.

Luffy D. Monkey
  • 116
  • 1
  • 13