レイアウト設計を完璧にやるのは不可能
アイテムの上部アキはデザイン・レイアウト設計段階でしっかり決めて
- 何pxのアキがあるのか？
- 他の要素が来た場合はどうなるのか？
- タイトルの直後はどうなるのか？
- 同じアイテムが連続した場合は何pxあけるのか？
きっちり設計できればいいんですけど、なかなか完璧にはいかないのが現実……
基本的には30pxアケだけど、今回は24pxにしたい！ そんなことありますよね。毎回スタイルシートに書けばいいんですけども、あまりにも特殊ケースすぎると再利用しないスタイルシートを量産しても無駄なので、自分の場合ですけど margin-top のスタイルを大量に用意するようにしてます。
コーディング美学的には邪道なのかも？
単発っぽいスタイルシートでも、きっちりクラスを付与してcssに書いていく。そういう考え方もあるんですけど、css側が「これどこで使ってるの？」みたいな再利用性の低いスタイルばかりになるのもなあ…と思ったのが発端。
私「margin-top を0～100px まで用意しておけばいいんじゃん！」
SCSSでの記述方法
CSSで101種類分記述していくのは大変なので、SCSSでの記述方法を紹介。
@for $i from 0 through 100 {
.mt#{$i} {
margin-top: #{$i}px !important;
}
}
これで
margin-top: 0px; ～ margin-top: 100px; が生成されます。
HTML上ではclass名として mt0 ～ mt100 で指定します。
margin-top を1px単位で調整したい時とか、アドリブ的な margin-top が必要な時に重宝します。
コメントを残す