@import让我感到困惑[重复]答案

【问题标题】：@import make me confuse [duplicate]@import让我感到困惑[重复]
【发布时间】：2014-06-20 15:58:58
【问题描述】：

在 compass 或 sass 旧版本中，对于这样的每个文件，它可以 @import 一次

_mixin.sass

=test_mixin()
    color: #AAFFCB

screen.scss

@import "include/_mixin";
@import "print.scss";
header{ @include test_mixin; }

print.scss

header{ @include test_mixin; }

输出screen.css

header {
  color: #aaffcb;
}
header {
  color: #aaffcb;
}

输出 print.css

header {
  color: #aaffcb;
}

它应该没有任何错误，但在新版本中有错误 error sass/print.scss (Line 5: Undefined mixin 'test_mixin'.) 我知道添加 @import "_mixin.scss" 到 print.scss 解决这个问题，但我想如果将来我想更改 _mixin.scss 文件名并且如果我有很多文件包括 _mixin.scss 我认为它太累了 T^T

对不起我的英语不好

我该如何解决这个问题？

谢谢:)

【问题讨论】：

标签： sass compass-sass

【解决方案1】：

这里有一些基础知识：那些你不想生成成独立 CSS 文件的 SCSS 文件，你可以在开头加上下划线来命名，例如_mixin.scss，那么它将是您的部分。以及您希望作为 单独的 CSS 文件的文件，您可以像往常一样命名，不带下划线，例如screen.scss.

然后，当您想在 screen.scss 中使用您的部分时，您可以使用 @import：

@import "path_to_your_partials/mixin"

（注意，导入时不需要下划线）。
然后，只有这样你才能使用其中的一些 mixin：

@include colorize;

您在独立的 CSS 文件中仅包含部分（带有 _ 的文件），而不是您想要生成为 CSS 的文件，因此在您的示例中 screen.scss 中，@import "print.scss"; 过多。

但是等等，它会变得更好！

包含在同一文件中的部分可以相互访问，因此您无需在部分中执行任何额外的@import。

继续上面的例子，如果你有另一个文件_colors.scss，你可以在你的_mixin.scss中使用一个变量$red，如果你声明在screen.scss中以正确的顺序导入它：

@import "path_to_your_partials/colors" // has a mixin colorize
@import "path_to_your_partials/mixin"  // has a variable $red
@import "path_to_your_partials/header"

在您的部分_header.scss 中，您可以同时使用来自_mixins.scss 的mixin 和来自_colors.scss 的变量：

@include colorize($red);

这样，当您更改分部文件名时，您只更正独立 .scss 文件中的名称，而不是所有分部。

【讨论】：

如果我想使用来自my_mixin/mixin 的mixin，我必须为每个scss 文件添加@import "my_mixin/mixin"，对吧？
如果你的scss文件要单独编译成css文件，可以。如果您有一个_mixin.scss，并且想在base.scss 和print.scss 中使用它，则在base.scss 和print.scss 中添加@import "path/mixin"。但是如果你想在你的_header.scss（部分）中使用_mixin.scss，它也包含在base.scss和print.scss（独立的CSS）中，你不需要在你的@987654351中再次包含它@.
感谢您的解决方案:)

【解决方案2】：

我认为这里没有什么大问题。由于print.scss 是单独的CSS 文件（开头没有下划线）它不知道test_mixin 函数是什么。你应该和开头的screen.scss文件一样：

@import "include/_mixin";

我也不明白你为什么在你的screen.scss 文件中导入print.scss 文件。对我来说没有任何意义。

您当然可以创建一个 _init 文件并将其导入每个完整的 scss 文件（不是部分文件），例如：

@import "base/_init";

在这个_init.scss 文件中，您可以添加导入规则。这样，即使您更改了文件名，您也可以在 _init.scss 文件中更改一次。

【讨论】：