[Sass] 「@for」と「変数」を使うとmargin/paddingの管理が楽になります。

「marginの値をclassで決めておいて、HTMLにはclassを記述する」というスタイルのコーディングがあります。
具体的には

CSSで 「.mt-30px」というclassに「margin-top:30px」を設定し、

.mt-30px{
    margin-top: #{$step}px;
}

HTMLで「class="mt-30px"」指定すると上のマージンが30pxになる、という書き方です。

<li class="mt-30px">上のマージンを30pxにします</li>

好みの問題は一旦置いておいて、
この書き方は大規模サイトに向いています。
スタイルを統一しやすいからです。

この書き方のデメリット（解決します）

「.mt-30px」のようなクラスを用意するのですが、「.mt-40px」「.mt-50px」、、、と増えるとCSSを書くのが面倒です。
さらに、
上下左右にmarginを用意したい。。。
同じことをpaddingでもやりたい。。。

となるとCSSがどんどん大きくなります。メンテナンスも面倒です。

このデメリットをSassで解決します

手順は2ステップです。ひとつずつやっていきます。

[STEP1] @forでループ処理する

@for文は fromからthroughまでループ処理してくれます。

下のコードを説明します。

from 1 through 10 は「1から10まで（10回）ループする」という意味です。
$iというのは変数です。
（名前は何でも良いのですがループ処理だと$iがよく使われます）
ループを行うと$iには1から10の値が順番に入っていきます。
つまり「１、２、３、４、５、６、７、８、９、１０」です。

次に$step: $i * 5; です。
「$stepという変数は$1に5をかけた値が入る」という意味です。
ですので、
$stepの値は5から50までの値が順番に入ります。
つまり「5、10、15、、、、45、50」です。

@for $i from 1 through 10 {
     $step: $i * 5;
}

[STEP2] ループ処理した値をmarginの値として使う

下のコードを説明します。

#{$step}は$stepに入っている値を文字として使うよという意味です。

例えば $step の値が 5 の場合、
「.mt-#{$step}px」は「.mt-5px」と同じです。
同様に、
「margin-top: #{$step}px」は「margin-top: 5px」と同じです。

ですので、下のコードをループ処理するだけで
「margin-top: 5px」〜「margin-top: 50px」
の指定が完了します。

@for $i from 1 through 10 {
    // step には5〜50が入る
    $step: $i * 5;
    
    // .mt-5px　〜 .mt-50px を書く
    .mt-#{$step}px {
        margin-top: #{$step}px;
    }
}

下のコードのように
margin-bottom や left、rightもまとめて指定できます。

@for $i from 1 through 10 {
    // step には5〜50が入る
    $step: $i * 5;
    
    // .mt-5px　〜 .mt-50px を書く
    .mt-#{$step}px {
        margin-top: #{$step}px;
    }
    .mb-#{$step}px {
        margin-bottom: #{$step}px;
    }
    .ml-#{$step}px {
        margin-left: #{$step}px;
    }
    .mr-#{$step}px {
        margin-right: #{$step}px;
    }
}

以上でコードの説明は終わりです。
Sassにはとても便利な機能があるのでぜひ使ってみてください。

[補足]

paddingを設定したい場合は上のコードのmarginをpaddingにします。
$step: $i * 10;にすれば10pxごとの指定が可能です。

[CodePen]

こちら