[sass,css,メディアクエリ]sassでメディアクエリを書くときに簡単だなって思った方法

sassでメディアクエリを書くときに簡単だなって思った方法
スマホ対応、タブレット対応のWEBを作るときに使われるレスポンシブWEBデザイン。
これはメディアクエリが必須となっています。

ボクは日頃レスポンシブWEBデザインは使用しません。
なぜなら面倒くさいし、ボクの技量ではデザインが限られてくるからwww

それでも試練はやってくるのです。

てことでSassでメディアクエリを書く方法は色々とありますが、間に合わせ的な書き方を発見しましたのでメモっておきます。

ブレイクポイントは変数に!

ブレイクポイントを毎回書くのが面倒くさいので変数に書いちゃいましょう。

変数の使い方

上記のように書けば大丈夫です。

実践

実際に実践のように書くと以下の様になります。

Sass

CSS

という風に普通にネストして書けます。

まとめ

ただし通常のSassにそってネストして書いていくのでコンパイルしたCSSの長いこと長いこと・・・。
その他にも@extendが使えなかったりするようですので、間に合わせ程度に覚えておくといいでしょう。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク