[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ごとの指定が可能です。