Sass在@import中使用变量值

时间:2018-06-04 14:44:14

标签: sass scss-mixins

我的代码看起来像这样

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

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

但后来我收到了这个错误:

  

模块构建失败:ModuleBuildError:模块构建失败:                         @import"地图/地图 - #{$ i}&#34 ;;                        ^         要导入的文件未找到或不可读:maps / map - #{$ i}。

我使用的是Laravel 5.6,我已经尝试过了,但到目前为止我还没有找到任何东西。是否可以使用scss导入变量文件名?

1 个答案:

答案 0 :(得分: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');