セレクタとimg画像のナンバリングを一致させる。

リストなどのセレクタ名にli class="menu01"
という風にナンバリングをつけてそこに配置する画像に../img/list_img01.jpgと同じナンバリング同士を設定するなど



scss

%markBase{
 padding:0 15px;
 background-repeat: no-repeat;
}

@for $i from 1 through 3{
 .menu0#{$i}{
	@extend %markBase;
	background-image: url(../img/list_img0#{$i}.jpg);
	}
}



css(コンパイル後)

.menu01, .menu02, .menu03 {
  padding: 0 15px;
  background-repeat: no-repeat;
}

.menu01 {
  background-image: url(../img/list_img01.jpg);
}

.menu02 {
  background-image: url(../img/list_img02.jpg);
}

.menu03 {
  background-image: url(../img/list_img03.jpg);
}



これでメニューバーに複数classセレクタ名をつけて、
1つは共通のナビバーとして任意に。
もう1つは画像とリンクさせるためにナンバリングさせた".menu01~03"という風に
つける。