sass - 如何在保持嵌套的同时渲染 SCSS？

Question

我正在创建一个 SCSS -> HTML 插件，需要先渲染 SCSS -> CSS，同时保持嵌套，这样我就可以使用 PostCSS 进行解析，然后创建一个 HTML 树。

我想像这样渲染 SCSS

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

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

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

输出如下所示：

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

基本上，我想要一种在保持原始嵌套的同时在 SCSS 中呈现所有内容的方法。可能吗？谢谢。

标签： sasspostcss

Answer 1

嵌套是特定于 SCSS 的。另外我不认为@import 是最佳实践，请改用@use。

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