Sassの繰り返し処理 #Sass

marginだけのクラスを、
Sassの繰り返し処理を用いて作成してみます。

margin.scss


// 繰り返すものをリストとして登録しておく
$space: 5px, 10px, 15px, 20px, 25px, 30px;

// 上記のリスト分だけ繰り返す！！
@each $prefix in $space{

    /* margin-bottom */
    .mb#{$prefix} {
        margin-bottom: #{$prefix}px;
    }

}

アウトプットはこんな感じ。

margin.css

.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }

参照
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-directive