セレクタと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); } }
.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"という風に
つける。