Sass 在@import 中使用变量值

Question

我的代码是这样的

      &.village {
        &.village- {
          @for $i from 1 through 12 {
            &#{$i} {
              background-image: url('../../images/maps/#{$i}.png');

              @import "maps/map-#{$i}";
            }
          }
        }
      }

但是我得到这个错误：

Module build failed: ModuleBuildError: Module build failed: @import "maps/map-#{$i}"; ^ File to import not found or unreadable: maps/map-#{$i}.

我使用 Laravel 5.6，我尝试查找它，但到目前为止我没有找到任何东西。是否可以使用 scss 导入可变文件名？

Answer 1

目前是 not possible，但不久的将来可能会向 Sass 添加一些新功能。

您可以通过使用条件来创建匹配您的导入的规则来实现这一点。您可以为此使用 @if（当我们等待 @switch 语句变为 implemented 时）：

@mixin customImport($file) {
    @if $file == 'file-one' {
        @import 'file-one';
    } @else if $file == 'file-two' {
        @import 'file-two';
    }
}

然后：

@include customImport('file-one');

Sass 在@import 中使用变量值

Sass use variable value in @import

sass

scss-mixins