sample

by tomoshige

HTML

<div class="wrap">
  <ul class="testlist">
    <li class="test--1">test1</li>
    <li class="test--2">test2</li>
    <li class="test--3">test3</li>
    <li class="test--4">test4</li>
    <li class="test--5">test5</li>
  </ul>
</div>

SCSS

$test_ArrayList: (
  "image1": 'jpg',
  "image2": 'png',
  "image3": 'jpg',
  "image4": 'png',
  "image5": 'gif',
);

$i: 0;

@each $pic, $extension in $test_ArrayList {
  $i: $i + 1;
  .test--#{$i} {
    &::after {
      content: '#{$pic}.#{$extension}';
      background-color: #ccc;
      margin-left: 20px;
      background-image: url(../hogehoge/#{$pic}.#{$extension});
    }
  }
}