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

Question

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

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

有没有办法基本告诉预处理器 - "相信我,你看到的变量/ mixin 将由所有处理的时间定义 "？

否则我看不到要避免将每张纸张导入单个清单,这看起来很臃肿.

谢谢.

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 文件。

布局/header.scss

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

给定类似于以下的文件结构：

/root

  style.scss
  variables.scss
  mixins.scss

  /layouts

    header.scss
    body.scss
    footer.scss

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