Sass 导入而不编译

在 sass 中，导入的方式是使用 import 命令。我将以 Zurb 基金会为例：

@import "foundation";

然后这将导入整个foundation.scss文件及其所有相对导入到当前文件顶部的内容。这意味着整个foundation.scss文件将被编译并连同文件内容一起输出到最终<name here>.css file.

尽管这对于定制（例如定制颜色和间距）很有好处，但在创建库并将这些库作为单独的液滴分发给其他人以插入其现有项目时，这会变得很痛苦。

有没有办法将文件导入为“引用”，以便mixins和其他变量在当前文件的范围内变得可用，但其他 css 语句被忽略？ LESS css 预处理器有一个新实现的导入标签，与此类似（适当地命名为reference).

看一下 Foundation 展示了一个很好的方法：

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

这里他们有一个@import "global";在文件的顶部。

接下来是一堆 mixin

在底部他们有：

@include exports("breadcrumbs") {
  @if $include-html-nav-classes {
    .breadcrumbs {
      @include crumb-container;
      @include radius($crumb-radius);

      &>* {
        @include crumbs;
      }
    }
  }
}

The $include-html-nav-classes在 _global.scss 文件中默认设置为 true。通过将其更改为 false，可以在任何其他文件中覆盖它。这允许您既使用 mixins 又生成 html。

如果您不需要生成任何 css，只需包含 mixins 即可，这会简化您的情况。我相信他们这样做是为了快速定制和优化输出的 CSS。