media

こんにちは!Y氏です。

まずモンハンですが、オンラインデビューしてから、片手剣サポにおける「盾コンの功罪」「火力不足」「サポートの不徹底」の問題点に直面しておりますY氏です,Y氏です…

衝撃を受けたsass“mixin”の数々 PART2

XXXXX→AAAとやるのが一番いいコンボだと思っていたんですよ!でもこれだと味方を吹き飛ばしてしまうんですね。確かに大剣やハンマーでためてる時にぶっ飛ばされるのは迷惑。あんまり密集地帯には近づかないようにしてるんですが、難しいもんです。

反省を未来に活かしつつ、今を生きるwebの人間として今回の記事、行きます!

レスポンシブも怖くない!「media-queries.scss」

前回の「grid.scss」は、みんな地味に苦労しているんじゃないかなーと思うボックスの横並びを簡単にするmixinでしたが、今回紹介するのは、こっちも結構地味にみんな面倒くせえなーと思っているんじゃないかと思う、レスポンシブ関連のmixinの紹介です!
以下よりダウンロード。
http://paranoida.github.io/sass-mediaqueries/

使用するのは「media-queries.scss」です。例によって読み込みます。

基本的にはこんな感じで書いてあげて

コンパイル!

このように短いコードで書けます。もちろん max-width にも min-width にも対応。両方にも同時対応できるようになってます。
でもまあこれだけだと「確かにコードは短くなってるけど…」的な感じだと思います(僕はこれでも相当便利だと思いましたが)。

mixin自作のためのプラグイン

こいつの白眉はこれ。実際「edia-queries.scss」を開くとわかるのですが、
iPhone,iPadのそれぞれのバージョン向けに細かくmixinが記述されてます。

たとえばこんな感じ

縦横それぞれの場合もあって、かゆいところに手が届く感じです。

まぁ使うか使わないかで言ったらそんなに使わないんじゃないかって気がしますが…アンドロイド版は無いし…

そこで!それぞれみなさんが設計したブレイクポイントがあると思うのですが、こちらを元にすれば簡単に自作のmixinが作れます。むしろそれの下敷きにしてくれと言わんばかりですね。

メディアクエリはsassと相性がいい

メディアクエリはその性質上、@media を宣言してからその中にセレクタやプロパティを書いていきます。しかもセレクタに至っては一個一個。。
そこでネストができるsassとは非常に相性がいいんですね。さらにmixinでいろいろ省略までできるので早いはずです。
もうプレーンなcssには戻れないなーと思ったり。
ではみなさんよいsassライフを!

page
1 / 1