◯列のレイアウトなんて瞬殺 – カラムレイアウト特化のSassのMixin –
目次
今回の記事を読むとカラムレイアウトが一瞬でできるようになります。
今回使用するMixinはこちらです。
まずはMixinを登録しましょう！
（僕はMixinだけをまとめた_mixin.scssに保存しています。）
SASSにMixinを登録してください。
前回使った@mixin flexもしれっと入ってますね！
(まだ見ていない方はこちらのFlexを効率的に使うMixinについての記事もどうぞ)
カラムレイアウトのコーディング方法、確立されていますか？
ブログの一覧などでよく見るカラムレイアウト。
書き方が確立されていないと意外と時間かかりませんか？
あいつの普段使っているMixinを使えば１０秒でレイアウトが完了し、レスポンシブも一瞬で完了します！
今回のMixinのイメージ
詳しい使い方
親要素（上の図の場合グレーに当たる部分）に、
@include layoutParentを、
子要素（上の図の場合テーマカラーの青のボックス）に
@include layoutChildrenを
設定します。
親要素の赤い50pxとなっているところは、子要素の横の余白が50pxということになり、
青字の70pxは子要素の縦の余白が70pxということになります。
子要素の赤いところは親要素と同じ値を、
最後の数字は何列にするか、を表しています。
レスポンシブのアップデートも簡単！
アップデートも簡単にできるので、保守性も高まります。
もちろん、パソコン→タブレット→スマホのように
何段階でもアップデートすることもできます！
万が一デザイン変更があった場合でも一瞬でレイアウトの数を変えることも容易です。
応用編
更に時短する方法として、
あいつはclampとも併用しています。
詳しいclampの使い方は別投稿でするので、
今回は軽く触れておこうと思います！
更に時短する方法として、
あいつはclampとも併用しています。
詳しいclampの使い方は別投稿でするので、
今回は軽く触れておこうと思います！
clampは割と新しいプロパティで、レスポンシブの作業を一気に減らせます。
上記の例だと、50px→30pxと流動的に値が変化しながら余白が変わっていく、
ということになります。
いままでは、
PCでは5opx、
Spになったら30px
というようにウィンドウ幅を変えたときにカクカク値が変化していましたが、clampを使うとモーフィングされてスムーズに値が変わります。
まとめ
今回のMixinも汎用性、メンテナンス性が高く使い勝手がいいのでぜひ実務で使ってみてください！
