无需编译的 Sass 导入

Posted 2023-03-06

【中文标题】无需编译的 Sass 导入

【英文标题】：Sass importing without compiling

【发布时间】：2013-12-09 21:43:51

【问题描述】：

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

@import "foundation";

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

虽然这有利于自定义，例如自定义颜色和间距，但在创建库并将这些库作为单独的液滴分发以供其他人插入现有项目时变得很痛苦。

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

【问题讨论】：

创建一个像_subfile.scss 这样的子文件，在那里编写您的代码并将其导入您的主文件。易于维护。

@VivekVikranth 然后我将如何打包发布（针对最终用户）？

Sass partial importing 的可能重复项

相关：***.com/questions/18408324/…

【参考方案1】：

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

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。

【讨论】：

其实Foundation方法是可怕的，不应该被模仿。没有人推荐以这种方式编写 CSS 库，因为它不会比它需要的更复杂。发出 CSS 的代码应该与混入、变量等分开。

目前，查找 any 指南针扩展是一项非常艰巨的任务。可以找到的大多数扩展都是纯粹的 building block 样式（即，它们只包括变量、函数和 mixin：sassy-buttons、modular-scale 等）。重置和规范化等扩展并不常见。 Foundation 和 Bootstrap 是我能找到的唯一扩展，它们将 CSS 和它们的基本构建块打包在一起而没有隔离。

这是一个很好的问题，我同意这个答案中的 Foundation 方法是代码异味。理想情况下，Sass 语言应该有一个特殊的导入指令（例如“@importReference”），这样就可以在不编写 CSS 的情况下导入文件。这在母版页链接 Global.css 文件，然后子页链接到可能使用母版页 CSS 文件中的引用的子特定 CSS 文件的母版页场景中会很有用（且直观）（如果Global.css 较大，应该跨多个页面缓存，而不是合并到一个 CSS 文件中）。

看起来其他人会喜欢same thing。禁用 CSS 输出的能力将回答 OP 的问题。