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

Question

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

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

我不想包括所有内容。

Answer 1

根据文档 @import 'compass'将导入 CSS3、Typography 和 Utilities 模块。这些模块不会向你的输出 CSS 中注入任何东西，它们只包含 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我们在编译命令中添加参数并比较结果。对于我的机器，编译需要 1.516 秒，all.css而module.css.