$items: sample1, sample2, sample3;

@each $item in $items {
  .#{$item}--bg {
      background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
  }
}

$items: sample1, sample2, sample3;

@each $item in $items {
  .#{$item}--bg {
      background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
  }
}

.sample1-bg {
  background: url(./img/sample1_bg.png) 0 0 no-repeat;
}
.sample2-bg {
  background: url(./img/sample2_bg.png) 0 0 no-repeat;
}
.sample3-bg {
  background: url(./img/sample3_bg.png) 0 0 no-repeat;
}

.sample1-bg {
  background: url(./img/sample1_bg.png) 0 0 no-repeat;
}
.sample2-bg {
  background: url(./img/sample2_bg.png) 0 0 no-repeat;
}
.sample3-bg {
  background: url(./img/sample3_bg.png) 0 0 no-repeat;
}

$sample_color:(
  abc:pink,
  def:black,
  ghi:blue,
  jkl:red
);

@each $sample, $color in $sample_color {
  .color--#{$sample} {
     color: $color;
  }
}

$sample_color:(
  abc:pink,
  def:black,
  ghi:blue,
  jkl:red
);

@each $sample, $color in $sample_color {
  .color--#{$sample} {
     color: $color;
  }
}

.color--abc {
  color: pink;
}

.color--def {
  color: black;
}

.color--ghi {
  color: blue;
}

.color--jkl {
  color: red;
}

.color--abc {
  color: pink;
}

.color--def {
  color: black;
}

.color--ghi {
  color: blue;
}

.color--jkl {
  color: red;
}