Question

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

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

我不想包括所有内容。

Answer 1

根据the docs @import 'compass'将导入CSS3，Typography和Utilities模块。这些模块不会在输出CSS中注入任何内容，它们只包含mixins。

通过将导入限制为特定模块或子模块（即@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秒。

@import'指南针'是否包含整个框架？

1 个答案: