Css Sass导入而不编译

Css Sass导入而不编译,css,reference,compilation,sass,zurb-foundation,Css,Reference,Compilation,Sass,Zurb Foundation,在sass中,导入的方式是使用import命令。我将使用Zurb基金会作为一个例子: @import "foundation"; 然后将整个foundation.scss文件及其所有相关导入导入到当前文件的顶部。这意味着整个foundation.scss文件将被编译并与文件内容一起输出到最终的.css文件 虽然这有利于自定义,例如自定义颜色和间距,但在创建库并将这些库作为单独的水滴分发给其他人以插入现有项目时,这会成为一种痛苦 是否有一种方法可以将文件作为“引用”导入,以便mixin和其他变量

在sass中,导入的方式是使用import命令。我将使用Zurb基金会作为一个例子:

@import "foundation";
然后将整个
foundation.scss
文件及其所有相关导入导入到当前文件的顶部。这意味着整个
foundation.scss
文件将被编译并与文件内容一起输出到最终的
.css
文件

虽然这有利于自定义,例如自定义颜色和间距,但在创建库并将这些库作为单独的水滴分发给其他人以插入现有项目时,这会成为一种痛苦


是否有一种方法可以将文件作为“引用”导入,以便
mixin
和其他变量在当前文件的范围内可用,但忽略其他css语句?更少的CSS预处理器有一个与此类似的新导入标记(适当地命名为“代码>引用/代码>”。

< P>查看基础,演示了一个很好的方法:

这里他们有一个
@import“global”位于文件顶部

然后是一堆混合物

在底部,他们有:

@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,只需包含mixin即可,这将简化您的情况。我相信他们这样做是为了快速定制和优化输出的css。

创建一个子文件,如
\u subfile.scss
,在那里编写代码并将其导入主文件。易于维护。@VivekVikranth然后如何打包以供发布(针对最终用户)?相关的可能副本:实际上,基础方法是可怕的,不应该被模仿。没有人建议用这种方式编写CSS库,因为这样做并不复杂。发出CSS的代码应该与mixin、变量等分离。此时,查找任何Compass扩展都是一项非常困难的任务。可以找到的大多数扩展都是纯粹的构建块样式(即,它们只包括变量、函数和混合:sassy按钮、模块化比例等)。像重置和规范化这样的扩展远不常见。基础和Bootstrap是唯一的扩展,我已经能够找到包既CSS和他们的基本积木一起没有隔离。这是一个很好的问题,我同意这个答案的基础方法是代码气味。理想情况下,Sass语言会有一个特殊的导入指令(例如“@importReference”),这样就可以导入一个文件而无需编写CSS。这在母版页场景中很有用(而且很直观),母版页链接一个Global.css文件,然后子页链接到可能使用母版页css文件引用的子特定css文件(如果Global.css更大,并且应该跨多个页面缓存,而不是合并到单个css文件中,则可能有意义)。看起来其他人也希望如此。禁用css输出的功能将回答OP的问题。