所以，我快疯了。我有一个
/style-1.scss
接着
/css/style-2.scss
我必须为style-1上的sprites和fonts设置路径，但是显然我想基于style-1是导入或直接编译的事实来更改路径
我试过使用全局变量，然后使用标志变量这样使用：
@if variable-exists($imported) 做这个..其他..
但是没有运气。似乎您无法在导入之前或之后的任何地方更改全局变量。
您曾经遇到过这样的问题吗？有什么办法吗？
您的样式的不良行为是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; }
因此，您主要有两种选择：
!defaultSASS参考中的描述
如果尚未分配变量，则可以通过在值的末尾添加！default标志来分配它们。这意味着，如果变量已被分配给它，则不会被重新分配，但是如果它还没有值，它将被赋予一个值。
因此，就您而言，您可以执行以下操作：
样式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输出文件：
样式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代码。这样，您可以为每个样式文件获得不同的路径。
样式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";
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句