テーブル化しちゃうと便利なこともある #mixin #scss

テーブル化しちゃうと便利なこともある #mixin #scss

どんどん進化するweb界隈のものごとですが、テーブル表示にしたほうがわかりやすいことも多々あります。昔からやってる人にはそっちのほうが馴染みがあるということもあるのでは?テーブルレイアウトなんていう荒業もあったくらいですし。

ということで、何でもかんでもテーブル化するmixinを作ってみました。

テーブル化するmixin

解説としては、mixinを呼び出す親要素をdisplay:tableでテーブル表示化。
その直接の子要素をワイルドカードを使って、 & > * の形で作成(いろんなclass名ふってあったり、タグも統一されていないだろうから)。ワイルドカードで指定した子要素にdisplay:table-cellを使うっていう単純なものです。

mixinの呼び出し方は

最初の$layoutでfixedを指定すれば、直接の子要素の数だけ勝手にセルの幅が、親要素の$widthに合わせて均等化されます。$widthの単位を%にしてあるので、入れられる数値は1~100の間で、設定しない場合は、100になるようになっています。$paddingに数値をいれると、rem単位ではありますが子要素のセルにpaddingがつきます。rem単位ってなんのこっちゃという人はこちらも合わせてどうぞ。

ちなみにコンパイル後はこんな感じになります。

サンプルとしてはulのリストに適用した場合です。もちろん、リストでなくても親子の関係が成り立っていればなんだってOK。

実は、このmixinはあることをするために生まれました。
そのあることはまた後日にでも。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top