compass-sass - @import 'compass' 是否包含整个框架？

Question

我开始在一个地方导入共享的东西，比如变量和 mixins——css list 文件。现在我正在使用文件的直接路径导入一些 Compass mixin。

我的问题是如果使用 @import 'compass'将整个框架注入(inject)到 application.css 中，还是通过查看 sass 文件中的引用然后只导入需要的 mixins 来完成？

我不想包括所有内容。

Answer 1

根据the docs @import 'compass'将导入 CSS3、Typography 和 Utilities 模块。这些模块不会向你的输出 CSS 中注入(inject)任何东西，它们只包含 mixin。

通过将导入限制为特定模块或子模块(即 @import 'compass/css3/image' )，您将减少将 SASS 文件编译为 CSS 所需的时间。

例如，让我们创建两个文件。

// all.scss

@import "compass";

.candy {
  @include background(linear-gradient(top left, #333, #0c0));
}

// module.scss

@import "compass/css3/images";

.candy {
  @include background(linear-gradient(top left, #333, #0c0));
}

如果我们编译它们(compass compile sass/FILENAME.scss)，结果 CSS 将是相同的:

.candy {
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
  background: -webkit-linear-gradient(top left, #333333, #00cc00);
  background: -moz-linear-gradient(top left, #333333, #00cc00);
  background: -o-linear-gradient(top left, #333333, #00cc00);
  background: linear-gradient(top left, #333333, #00cc00);
}

现在让我们添加 --time编译命令的参数并比较结果。对于我的机器，编译 all.css 需要 1.516 秒而 module.css 仅 0.108 秒.