Question

在最近的Web项目中，我一直在使用Bulma CSS框架，这非常了不起，使我的工作更加轻松直接。

但是，我没有使用其中的大部分功能，只是其中一些功能。我知道我只能导入我需要的文件，例如：如果只需要columns系统，我将创建一个SCSS文件，如下所示：

@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/base/_all.sass";
@import "bulma/sass/grid/columns.sass";

这将生成一个巨大的CSS文件，我将不需要最多的文件！我将只使用@extend关键字来使用它：

.my-column {
  @extend .column;
  ...
}

但是生成的CSS文件将被以下行污染：

/* line 3, ../sass/bulma/sass/grid/columns.sass */
.column, .my-column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}
/* line 9, ../sass/bulma/sass/grid/columns.sass */
.columns.is-mobile > .column.is-narrow, .columns.is-mobile > .is-narrow.my-column {
  flex: none;
}
/* line 11, ../sass/bulma/sass/grid/columns.sass */
.columns.is-mobile > .column.is-full, .columns.is-mobile > .is-full.my-column {
  flex: none;
  width: 100%;
}
/* line 14, ../sass/bulma/sass/grid/columns.sass */
.columns.is-mobile > .column.is-three-quarters, .columns.is-mobile > .is-    three-quarters.my-column {
  flex: none;
  width: 75%;
}

我只想要第一个方块。我不会在HTML中使用大多数生成的类，而只会使用my-column类。

我要寻找的是预处理器，仅在我声明的类（my-column）中包括以这种方式需要的东西：

.my-column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

我不知道是否有可能，因为Bulma框架非常轻巧，所以也许没有必要。我只是不喜欢CSS文件中没有太多不必要的内容。

也许我只是把整个SCSS预处理器弄错了。但是，如果我还是没有明确表示自己，请在评论中让我知道。

感谢您的时间！

如何通过SCSS导入和使用Bulma框架，但不将其所有内容导出到CSS

0 个答案: