css – Sass导入而不编译

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

@import "foundation";

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

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

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

解决方法

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

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

在这里他们有一个@import“全球”;在文件的顶部.

接下来是一堆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.