如何避免 SASS 变量的多个 @imports？

Posted 2023-03-06

【中文标题】如何避免 SASS 变量的多个 @imports？

【英文标题】：How to avoid multiple @imports of SASS variables?

【发布时间】：2015-09-15 04:30:37

【问题描述】：

我正在开发的网站使用 rails 资产管道和 application.scss 文件来导入和处理不同的 CSS 文件。

但是，某些样式表在特定的地方使用，对于那些，将它们导入全局清单没有什么意义。但是不是，因此导入它们需要将 variables.scss 和可能的 mixins.scss 导入工作表本身（这样它们才能正确处理），从而导致最终 CSS 中的代码重复。

有没有办法基本上告诉预处理器 - “相信我，你看到的变量/mixin将在处理所有内容时定义”？

否则，我不知道如何避免将每张工作表导入单个清单，这看起来很臃肿。

谢谢。

【问题讨论】：

可能重复：***.com/questions/17976140/…、***.com/questions/18408324/…、***.com/questions/24182734/…

我不太确定我明白了，如果你有只包含 mixins 和变量的文件，你应该能够尽可能频繁地包含它们而不会出现任何膨胀？两者都不会导致编译的 css

所以使用例如@import "/mixins";在 css 文件的开头导致没有比不使用导入更多的编译代码？所以它只是允许css被编译？如果是这样的话。太好了，谢谢！

据我所知，多次导入您的一个或所有 mixin/variables 文件不会有什么不同，因为它们都按逻辑顺序编译成一个 css 文件。处理器。

@thecraighammond 所以如果我有两个导入 @import mixins 和 @import variables 但 mixins 文件本身已经导入了变量。将这两个文件都导入到component.scss 这样的新文件中会不会是多余的？没有性能优势？

【参考方案1】：

您的问题的简短回答是否定的。变量需要在编译中被调用时按逻辑顺序定义。这就像一个“鸡和蛋”的场景。

根据我在您的描述中可以确定，您正在处理的项目不是编译成统一的工作流程，而是分成与您的文件结构相关的模块化部分。如果是这种情况，您可以在每个文件的开头做的是从根目录引用变量文件。

在正常的工作流程中，您将根据定义的层次结构导入 scss 文件，如下所示：

sass/style.scss

/* Main Stylesheet */

@import "variables";
@import "mixins";

/* Modular Sections */
@import "layout/header";
@import "layout/body";
@import "layout/footer";

将使用命令sass sass/style.scss:style.css 编译成一个样式表style.css

我假设您的项目所做的是将所有 /* Modular Sections */ 文件编译成它们自己的 CSS 文件。

layout/header.scss

/* Header Stylesheet */
@import "../variables";
@import "../mixins";

给定的文件结构类似于：

/root

  style.scss
  variables.scss
  mixins.scss

  /layouts

    header.scss
    body.scss
    footer.scss

不过，这一切似乎有点愚蠢。我不知道当前 sass 编译中的所有参数，但我建议使用统一的工作流程。

【参考方案2】：

您可以使用 Partials，这样编译器就不会尝试解释变量等。

基本上，重命名您不希望编译器解释的文件——但将在编译后可用——在文件名前加上下划线。 p>

例如。 _filename.scss

【参考方案3】：

如果我理解得很好，您希望避免在 css 中使用 @import 导致 css 文件中相同 css 的副本。我通过分层三解决了这个问题。

以 home.scss 文件为例，您可以在其中导入 header.scss 和 footer.scss。 header.scss 和 footer.scss 都使用您从名为 colors.scss 的文件中导入的特定颜色：

// colors.scss

$MidnightBlue: #00478f;
$RedOrange: #ff5d00;
$MistyBlue: #d8e1e7;
$Ebony: #2a231f;

现在您可以在 header.scss、footer.scss 甚至 home.scss 中导入颜色。结果是在 home.css 中，colors.scss 的代码重复了 3 次。 一种解决方案是仅在 header.scss 中导入 colors.scss。然后在 home.scss 中，您指定的第一个 @import 是 @import "header.scss";，然后是 @import "footer.scss";，因此即使您不直接在页脚中导入它们，您也可以在 footer.scss 和 home.scss 中使用颜色变量。 scss 和 home.scss。这是因为颜色的变量是在页脚之前导入的，并在 home.scss 中的其余代码之前编译。 现在如果你检查 home.css 你不应该看到重复的代码

刚开始在footer中写入颜色变量时会收到一个错误，因为它们没有定义，但是当你在home.scss中导入footer时它会消失