Sass：如何使用变量更改导入样式表的路径？

Question

所以，我快疯了。我有一个

/style-1.scss

然后

/css/style-2.scss

---

• style-2 导入 style-1 并在 /css 中编译
• style-1 也在根目录中编译/
• style-1 还导入 _utilities 和 _fonts（应该使用路径变量）

---

我必须在 style-1 上设置精灵和字体的路径，但显然我想根据 style-1 是导入或直接编译的事实来更改路径

我尝试使用全局变量，然后像这样使用标志变量：

@if variable-exists($imported) 这样做.. 否则..

但没有运气。似乎您无法在导入之前或之后从任何地方更改全局变量。

你遇到过这样的问题吗？有什么解决办法吗？

Answer 1

样式的不良行为是 sass 工作方式的结果。

Sass @import 导入和渲染（如果文件包含 css 输出）文件以便生成语句。因此，如果您创建一个导入文件，该文件在内部定义并使用一些变量来创建 css 输出，尽管您在导入之前或之后修改它们，但 css 输出将保持不变。这是一个例子：

foo.scss

$width: 10px;
a { width: $width; }

bar.scss

$width: 20px;

@import "foo"; // Import and then renders

$width: 30px;

bar.css

a { width: 10px; }

所以你主要有两种选择：

使用 !default

!default 来自SASS reference 的描述

如果变量尚未分配，您可以通过将 !default 标志添加到 值的结束。这意味着如果变量已经被赋值，它不会被重新赋值，但如果它还没有值，它将被赋予一个。

所以，在你的情况下，你可以这样做：

style-1.scss

@import "utilities";
@import "fonts"
$foo-sprite: "path/to/foo.png" !default;
.foo-icon { background-image:url($foo-sprite) }

style-2.scss

$foo-sprite: "../path/to/foo.png";
@import "../style-1.scss";

这些将是 CSS 输出文件：

style-1.css

.foo-icon { background-image:url("path/to/foo.png") }

style-2.css

.foo-icon { background-image:url("../path/to/foo.png") }

在两个文件中创建一个新的部分导入

有时您无法编辑变量，因为它来自导入的框架，所以在这种情况下，处理您的问题的最佳方法是创建一个新的部分以由 style-1.scss 和 style-2.scss 导入，我们称之为_common.scss。 _common.scss 应该包含 style-1.scss 中必须渲染的 sass 代码。这样，您可以为每个样式文件获取不同的路径。

style-1.scss

@import "utilities";
@import "fonts";
@import "common"; // This is the 

style-2.scss

@import "utilities";
@import "fonts";
@import "paths"; // You can import here different sprite and font paths
$foo-path: "../foo/bar.css" // You can also declare variables here if you prefer
@import "common";