【问题标题】：SASS: how to use cross-file extension?SASS：如何使用跨文件扩展名？
【发布时间】：2013-09-30 20:21:16
【问题描述】：

我有几个 sass 文件：

_common.sass - 全局使用的所有内容，包括变量、mixins 等。
partials/_partial.sass - 部分样式
homepage.sass - 主页特定

现在的问题：

如果我将_common.sass 导入partial/_partial.sass，然后将partials/_partial.sass 导入homepage.sass，那么_common.sass 会被编译两次。不好。

重点是homepage.sass 必须引用_common.sass，因此它可以扩展全局类定义并使用mixins 和os on，以及_partial.sass 必须能够访问来自@ 的全局事物987654332@。但是_partial.sass 本身必须导入到homepage.sass 中。

听起来很简单，不值得，但我很难解决这个难题。

编辑（清除）：

// _common.sass
.sprite
    background: url(sprite.png)

// _partial.sass
@import "common"
.link
    @extend .sprite

// homepage.sass
@import "common"
.social
   @extend .sprite
@import "partials/partial"

如您所见，主页和部分扩展了全局类.sprite。这就是我想要达到的目标。但最终，主页获得了每次嵌套导入编译的_common.sass的全部内容（2次，特别是示例）

【问题讨论】：

我对您的要求有点困惑...但是将@import "common" 和@import "partials/partial" 简单地放在您的homepage.sass 文件的顶部是否行不通？
抱歉，不清楚。我将添加其他信息。
完成编辑。但是你已经指出了一个关键字at the top。我会试试看。
刚刚检查过。结果相同。 common 被编译了 2 次。
嗯。所以你的问题是common 被编译两次，即使只有一个@import 引用common（例如partial 导入common 和homepage 导入partial 但不是common）？

标签： sass

【解决方案1】：

“主”SASS 文件的布局

我通常这样做的方式是将文件包含在我的 site.scss 文件的开头。

site.scss

// variables, mixins, etc. at beginning
@import "common/_variables"
@import "common/_mixins"
@import "common/_sizes"
// ...

// your styles that use the variables, mixins, etc.
@import "modules/_blah"
// ...

请注意，如果文件仅包含 mixins、变量等，则可以多次包含它，因为不会产生任何输出。对于某些文本编辑器/IDE，您需要执行此操作才能启动智能感知。

_filename 标准

SASS 有一个标准的命名约定，即以下划线 _ 开头的文件不打算编译，仅用作其他文件的部分文件。根据您使用的工具，使用此命名约定可能会停止编译错误。

【讨论】：

【解决方案2】：

我将建议以下内容：只需创建一个最初将添加 _common.scss 的文件。

// index.scss
@import "common"
@import "homepage"
   // inside homepage
   @import "partials/partial";

如果你这样做，我认为共同的东西将可用于主页和部分，因为它们是在它们之上导入的。 IE。您不需要在主页或部分内部导入 common。

【讨论】：