css - 我可以从 SASS 文件中导入一个或多个子部分吗？

Question

我的 SASS 生成的 CSS 文件充满了一堆我不需要的东西。这意味着我的用户必须下载比他们真正需要的大得多的 CSS 文件。

在大多数编程语言中，可以创建这样的导入语句:

from "some_codefile" import Dog, Cat, Fish

对于 SASS 场景，假设我有一个部分文件 _colors.scss，

它包含:

$white: #ffffff;

@mixin black() {
    color: black;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

现在我想导入$white、@include black 和.red。但是，我不使用 .blue 类，也不想导入它，因为它只会占用我的 CSS 文件中的空间。

我试过:

@import "colors.scss" white, black, red;

但它只是给出了语法错误。

如何防止我的 CSS 文件填满我不需要的内容？

Answer 1

不，那是不可能的。但是，您可以使用 placeholder selectors在你的部分中，除非它们是 @extended，否则它们不会被渲染。

$white: #ffffff;

@mixin black {
    color: black;
}

%red {
    color: red;
}

%blue {
    color: blue;
}

.foo {
  @extend %red;
}

.bar {
  @extend black;
}