compassに頼らないでflexboxのmixinを作ってみた話 #scss #mixin

compassに頼らないでflexboxのmixinを作ってみた話 #scss #mixin

フレキシブルにボックスを変化させるレスポンシブ時代の救世主(?)flexbox。いつまでもcompassに頼っているのもどうかなと思って少しは自分で@mixinを組み立ててみることにしました。

そのがんばりの証がこちら。

flex-containerの@mixin

よく使いそうなものをまとめて、@mixinにするというものすごく地味な作業をしました。もしかしたらだけど、もう少し効率のいい書き方があったかもしれない。

これらをまとめて設定するための@mixinはこちら

1行目の部分で最初に書いた地味なところを一気に設定することができます。
まぁ、それぞれが何に当たるかを覚えてないと一気に設定も忘れてしまいそうですが(笑)

別々に使うこともできるし一気に設定もできるし、もしかしたら使いようによってはいいかもしれません。

flex-itemの@mixin

flexboxでは子要素が勝手にflexi-temに変化しますが、flex-itemにはflex-item専用のCSSが用意されています。これらを使うためのmixinが下です。

とまあ、ながなが書きましたが、これがflex-itemのためのmixinです。flex-containerのときと同じように、一気に設定したい方はこちらもどうぞ。

例によって1行目でいろいろ設定できます。

実際に使いやすいかどうかはさておいて、Flexboxを使うためのmixinを作ってみた話でした。


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

Back to Top