Sass использует значение переменной в @import

Мой код выглядит так

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

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

Но затем я получаю эту ошибку:

Ошибка сборки модуля: ModuleBuildError: Ошибка сборки модуля: @import "maps/map-#{$i}"; ^ Файл для импорта не найден или не читается: maps/map-#{$i}.

Я использую Laravel 5.6, я пытался найти его, но пока ничего не нашел. Можно ли импортировать переменное имя файла с помощью scss?


sass scss-mixins
person Community    schedule 04.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В настоящее время это невозможно, но в ближайшее время в Sass могут быть добавлены некоторые новые функции. будущее.

Вы можете добиться этого, используя условные операторы для создания правил, соответствующих вашему импорту. Для этого вы можете использовать @if (пока мы ждем, пока оператор @switch будет реализован) :

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

Тогда позже:

@include customImport('file-one');
person muecas    schedule 04.06.2018
comment
Я попробовал такой миксин, но получил следующую ошибку: Import directives may not be used within control directives or mixins. Использование SASS 3.5.6. - person James Jones; 02.07.2018
comment
@JamesJones, я думаю, вам просто нужно обновить версию компилятора sass. - person muecas; 03.07.2018
comment
Спасибо за ваш ответ. 3.5.6 Является последней версией Ruby SASS на момент написания. Есть что-то, что мне не хватает? - person James Jones; 04.07.2018