Sass use variable value in @import

Question

My code looks like this

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

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

But then I get this error:

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

I use Laravel 5.6, I've tried looking it up but I didn't find anything so far. Is it possible to import a variable filename with scss?

score 1 · Accepted Answer · answered Jun 04 '18 at 15:00

1

This is currently not possible, but some new features may be added to Sass in a near future.

You could achieve so by using conditionals to create the rules to match your imports. You could use @if for that (while we wait for a @switch statement to be implemented):

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

Then later:

@include customImport('file-one');

answered Jun 04 '18 at 15:00

muecas

4,265
1
8
18

I tried a mixin like this but got the following error: `Import directives may not be used within control directives or mixins`. Using SASS 3.5.6. – James Jones Jul 02 '18 at 05:41
@JamesJones i think you just need to update your sass compiler version. – muecas Jul 02 '18 at 21:15
Thanks for your reply. 3.5.6 Is the latest Ruby SASS at time of writing. Is there something I'm missing? – James Jones Jul 04 '18 at 12:54

Sass use variable value in @import

1 Answers1