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

所以，我快疯了。我有一本书

/style-1.scss

然后

/css/style-2.scss

---

• style-2导入style-1并在/css中编译
• 样式1也在根目录中编译/
• style-1还导入_实用程序和_字体（应使用路径变量）

---

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

我尝试使用全局变量，然后使用标志变量，如下所示：

@如果变量存在（$imported）

请执行此操作。。否则

但是没有运气。在导入之前或之后，似乎无法从任何位置更改全局变量

---

你曾经遇到过这样的问题吗？有什么解决方案吗？

您的风格中不需要的行为是sass工作方式的结果。

Sass

@import

导入并呈现（如果文件包含css输出）文件，以便生成语句。因此，如果您创建一个导入的文件，该文件在内部定义并使用一些变量来创建css输出，尽管您在导入之前或之后修改了这些变量，css输出将保持不变。下面是一个例子：

foo.scss

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

酒吧

$width: 20px;

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

$width: 30px;

bar.css

a { width: 10px; }

因此，您主要有两种选择：

使用！违约

！默认值

中的描述

如果变量尚未赋值，则可以通过添加！默认标志为 值的结尾。这意味着如果变量已经被赋值，它将不会被重新赋值，但是如果它还没有值，它将被赋值

因此，在您的情况下，您可以这样做：

style-1.scss

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

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

style-2.scss

$foo-sprite: "../path/to/foo.png";
@import "../style-1.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";

这些将是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"
$foo-sprite: "path/to/foo.png" !default;
.foo-icon { background-image:url($foo-sprite) }

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

style-2.scss

$foo-sprite: "../path/to/foo.png";
@import "../style-1.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";

---

嗯。是的，我在想这样的事情。但是，你的意思是我可以在文件中使用变量，而不必在该文件中或在其他地方声明它们吗？非常感谢，你更新的答案让我了解了所有内容并解决了我的问题：）