Question

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

@import "foundation";

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

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

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

Answer 1

看一下基金会展示了一个很好的方法：

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

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

接下来是一堆mixins

在底部他们有：

@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，可以在任何其他文件中覆盖它。这允许您同时使用mixins并生成html。

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

Sass导入而不编译

1 个答案: