あらかじめブレイクポイントごとのmixinがあると便利なはず! #mixin #scss

あらかじめブレイクポイントごとのmixinがあると便利なはず! #mixin #scss

media queryをつかって、画面サイズごとのブレイクポイントを考えるとき、毎回毎回

なんて書いてたら、イライラしてしまいます。これがまだスマホサイズのときだけだったらまだしも(それでも十分多いですが)、タブレットサイズだったり、PCサイズだったりといちいち考慮して書き続けてたら、思わず発狂してしまいそうです。最近はwebサイトを見る人の環境もかなり変わってきてますし、できたらどんな環境の人でも楽しめるようにできたらいいなあってこだわるから手間をかけてしまうんですが。でもそういう一手間って大事だと思うんですよね。たとえ、発狂しそうになっていたとしても。
まぁ、これまではそれが普通だったので、なんとか楽をする方法はないかなぁと考えあぐねいていたのが事実なんですが……

だったらいっそmixinにしてしまおう

毎回書くのはしんどいので、そういうときこそscssの便利さを利用しようということで、media queryごとのブレイクポイントをmixinにしてみました。

画面サイズの分岐は個人的な感覚ですが、media-smallがスマホサイズ、media-mediumがタブレットサイズ、media-largeがノーパソサイズ、media-xlargeが大画面サイズと予想して作ってあります。
使うときは

とやると、コンパイル後は

こんな感じになります。

このmixinの便利なところは、場所を選ばず使えるということですかね。
部分だけ使うのもOKだし、全体で使うのもOK。

スマホとタブレットだけ対応したいときは

なんていう使い方もしています。

何が自分にとって一番ラクかを模索しながらやるのもまた楽しいですね。
使えそうなら、どうぞご自由に使ってみてください。


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

Back to Top