Question

所以，我疯了。我有一个

/style-1.scss

然后

/css/style-2.scss

style-2导入style-1并在/ css
style-1也在root /
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

来自SASS reference

的

!default说明

如果尚未通过添加！default标志来分配变量，则可以将其分配给价值的结束。这意味着如果已经为变量赋值，则不会重新赋值，但如果它还没有值，则会给它一个。

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

样式1.scss

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

样式2.scss

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

这些将是CSS输出文件：

样式1.CSS

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

样式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

样式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";

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

1 个答案:

使用！default

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