scss loop

loop-multi.scss

$main-title: (
			blog:
			(
				width:188px,
				background-image:url(../images/blog/main-title.png)
			),
			archive:
			(
				width:162px,
				background-image:url(../images/archive/main-title.png)
			),
			about:
			(
				background-image:url(../images/about/main-title.png)
			),
		);


.maintext{
		@each $key, $value in $main-title {

			&--#{$key} {
				@extend %main-title__text;
				@each $key2, $value2 in $value {

					#{$key2}:$value2

				}
			}

		}

}

loop-single.scss

$slider_names: blog, archive, about;
$slider_start:-100%;

@each $class_name in $slider_names {

	.mainCatch--#{$class_name} {
		@extend %mainCatch--index--main;
		left: $slider_start;
		background: url(../images/home/mainCatch-#{$class_name}.jpg) center center / cover no-repeat;
	}
	$slider_start:$slider_start+100;
}