Sass导入而不编译

Question

在sass中,导入的方式是使用import命令.我将以Zurb Foundation为例:

@import "foundation";

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

虽然这有利于自定义,例如自定义颜色和间距,但在创建库并将这些库作为单独的液滴分发给其他人插入其现有项目时,会变得很麻烦.

有没有办法将文件导入为"引用",以便mixins在当前文件的范围内可以使用其他变量,但忽略其他css语句？LESS css预处理器有一个新实现的类似于此的导入标记(适当地命名为a reference).

Answer 1

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

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;
      }
    }
  }
}

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

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