1

Есть такой код 

.image
    position: relative
    @for $i from 0 to 7
      &:nth-child(#{$i + 1})
        &:before
          content: ''
          @include sprite($advantages-$i)

Хочу использовать цикл, в нём @include sprite($advantages-1) - будет возвращать стили для изображения из спрайта. Как использовать правильно переменные, что бы на каждой итерации цикла я получал @include sprite($advantages-1), @include sprite($advantages-2) и т.д.?

korg
  • 318
  • У вас где-то объявлены переменные $advantages-1, $advantages-2 и так далее? – Виталий Емельянцев Dec 18 '16 at 21:23
  • То есть, хотите ли вы в вашем коде динамически генерировать названия переменных, из которых брать значения? Если да - Sass так не может. Но то же самое можно сделать через Sass Maps: https://www.sitepoint.com/using-sass-maps/ – Виталий Емельянцев Dec 18 '16 at 21:32
  • Переменные объявлены в файле со стилями и миксином для спрайта. И да, я пытаюсь сделать генерацию имени переменной в цикле. Точней хочу разобраться. Если не затруднит, опишите решение или поделитесь любой информацией с использованием Sass Maps. – korg Dec 18 '16 at 22:08
  • написал. Посмотрите, подошел ли вам ответ, правильно ли я понял условия. – Виталий Емельянцев Dec 19 '16 at 16:54

1 Answers1

0

Получать значения динамически генерируемых переменных - Sass не позволяет. Но можно решить вопрос через Sass Maps:

@mixin sprite($index) {
  background: url($index);
}

$advantages: 'image1.jpg',
             'image2.jpg',
             'image3.jpg',
             'image4.jpg',
             'image5.jpg',
             'image6.jpg',
             'image7.jpg',
             'image8.jpg';

.image {
  position: relative;

  @for $i from 1 to length($advantages) {
    &:nth-child(#{$i}) {
      &::before {
        @include sprite(nth($advantages, $i));
        content: '';
      }
    }
  }
}

$advantages в данном случае - массив (но может быть и хешем при необходимости). В цикле через nth($advantages, $i) мы получаем значение определенного элемента массива, и передаем его как параметр миксину sprite.

Посмотреть код на Sassmeister.

Виталий Емельянцев
  • 5,788