Sass文件的导入语句中可以使用变量吗？

Question

在 Less 中，我可以像这样做：

@basePath:"../../some_crazy_project_path_to_repeat/less/";
@import "@{basePath}less.less";

所以我试图在Sass中做同样的事情

$basePath:"../../some_crazy_project_path_to_repeat/less/";
@import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.

和

@import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.

有没有在Sass中实现这个的方法？

- Shanimal

---

字符串插值使用 #{}。 - steveax

@steveax 谢谢。我正在从第三方库导入一堆组件定义。我可以重复 n 次完整路径，但我想如果有办法在 Less 中实现这个目标，为什么不在 Sass 中呢？@ Arman H，我已经将你的注释添加到问题中了。我认为 Andrey 知道我不知道的东西 :) - Shanimal

Andrey的回答是正确的，你不能在Sass导入中使用字符串插值。 - steveax

使用 @import "#{$basePath}less.scss"; 即可轻松完成。 - BernaMariano

@BernaMariano，@import "#{$basePath}less.scss"; 会导致 Sass 错误。它无法正常工作。 - Szorstki

Answer 1

在 SASS 中，无法使用条件语句进行导入。

考虑将您的项目创建成 Compass 扩展。

- Andrey Mikhaylov - lolmaus

---

根据Sass @import文档，Andrey是正确的。 "导入可以包含# {}插值，但只有在某些限制条件下才能使用。无法根据变量动态导入Sass文件；插值仅用于CSS导入。因此，它仅适用于url（）导入。" - steveax

Answer 2

正如之前提到的，不能在导入路径中使用变量。你可以使用 -I 或 --load-path 选项来指定要搜索的目录。

sass --watch sass/:css/ --load-path ../../path/to/library/

假设你有这样的目录结构：

themes
    hotdog
        _variables.scss
    classic
        _variables.scss
styles.scss

你的styles.scss应该有相对于提供的load-path(s)的导入路径:

// note the import here doesn't contain themes, hotdog, or classic
@import "variables"; 

@debug $foo;

您的命令可能如下所示：

# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/

请查看Sass选项文档以获取更多信息。

- cimmanon