Question

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

但是，某些样式表在特定位置使用，对于那些将它们导入全局清单没有意义。但不所以导入它们需要将variables.scss和可能的mixins.scss导入到工作表本身（这样它们才能正确处理），导致最终的css中出现重复的代码。

有没有办法基本告诉预处理器 - ＆＃34;相信我，变量/ mixin你会看到将被定义到处理所有内容时＃34;？

否则，我不会看到如何避免将每张纸张导入单张清单，这看起来很臃肿。

感谢。

Answer 1

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

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

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

<强> SASS / style.scss

/* Main Stylesheet */

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

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

将使用命令style.css

编译到一个样式表sass sass/style.scss: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编译中的所有参数，但我建议使用统一的工作流程。

Answer 2

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

基本上，重命名不希望编译器解释的文件 - 但将在编译时可用 - 在文件名之前使用下划线。

例如。 _filename.scss

Answer 3

如果我理解得很好，您希望避免在 scss 中使用 @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 中的颜色变量直接在footer.scss 和home.scss 中。这是因为颜色变量在页脚之前导入并在 home.scss 中的其余代码之前编译。现在如果你检查 home.css 你不应该看到重复的代码

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

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

3 个答案: