0

我有几个 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必须可以从_common.sass. 但_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"

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

4

2 回答 2

1

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

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

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

于 2013-10-01T14:29:43.643 回答
1

“主” SASS 文件的布局

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

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

于 2013-10-01T14:32:31.647 回答