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) и т.д.?

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

1 ответ 1

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.

1
  • Благодарю добрый человек за знания!
    – korg
    1 мар 2017 в 22:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.