(SCSS)を使ってみました。(SCSS)を使ってみました。CSS3でコーディングしているとき、ベンダープレフィックスやらCSSハックやら、同じことを何度も書かないといけないので、CSSの管理に限界を感じていました。昔から、SASSがあるのは知っていましたが、CSSをコンパイルして出力するために、CSSとは違った言語「SASS形式」で記述するのが面倒というか、事故りそうだったので、導入を断念していました。redところが、最近、言語「SCSS形式」という記述でもOKということを知り、試しにこのサイトのCSSに導入してみました。言語「SCSS形式」とは、CSS3の記述を互換しており、拡張子を「.css」から「.scss」に変更するだけなので非常に導入が楽ちんです。red;}でも、唯一の弱点は、筆者は抵抗ありませんでしたが、初期インストールや設定が面倒なようです。自分のパソコンにrubyを入れないといけません。(mixinが全てではなく、ネストなどのために導入でもOKですが・・・)。これは、「compass」というSassのフレームワークがあり、一般的にCSS3で必要なmixinが予め準備されています。install」するとSSLエラーが出て先に進まなかったので、下記のサイトを参考にさせていただきました。installするとSSLエラーが出る場合の解決策http://qiita.com/shimoju/items/394818b4989b94680aafまた、Compassの本家リファレンスは下記のサイトです。Reference)http://compass-style.org/reference/compass/これで、環境は揃ったので、面倒だったので今まで使わなかった「rem」指定を、自作のmixinを準備して使って見たいと思います。ベースは下記のサイトのものを使いました。MIXINhttp://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/このままでは、引数に「rem」「px」「0」「auto」しか指定できないので、下記のようなものに対応できません。}そこで、下記のように改良してみました。$rem;}}}「$rem_px_only」は、CSSをWordpressのTinyMCEで使いたいときに、「@import」前にTrueにしてpx指定のみを出力するために設けました。このmixinを使うと下記のとおりです。4%;}このmixinを使って、下記のようにDocomentのRootを10pxにしておけば、remに対応していないブラウザでもpx指定の方が有効になります。polyfill」というのも検証してみましたが、表示が著しく遅くなってしまいました。沖縄の保険代理店「イイトゥク」様のホームページ・リニューアル沖縄を拠点とし、お客様のご予算と目的に応じたホームページ制作(WordPress)・ラジオCM/番組制作など、各種メディアでの情報配信のお手伝いをしております。お見積りのご依頼はもちろん、事前のご相談も承ります。ご気軽にご連絡ください。