なかちょんブログ

プログラミングとマイクラ好きな子育てパパのブログ

レスポンシヴWebデザインのサイトを作ろうとしてメディアクエリーの中に@includeをやろうとしても使えないからそんな時はSCSSにしときなさいよ

      2013/02/23

既存のHTMLで作られたサイトがあり、そのサイトをWordPress化することと、レスポンシヴWebデザインにすることを同時にやろうとしている。

当初、既存サイトのCSSはあくまでも参考にしながらモバイルファーストで組んでいこうかと思っていたのだが、自分のキャパシティをはるかに上回るCSSレベルだった為、まずはWordPress化から始めることとした。

というのも、メディアクエリー使って、min-width: 768pxに既存CSSをまるまる読み込んじゃえば、あとはスマートフォンとタブレットだけ用意すればいいんじゃない? とかる〜く思ったから。

まぁ、この先は地獄がまっているかもしれないけど、針の山・血の池を通った経験は、きっと僕を強くしてくれるだろうと楽観的に思っていました。

ところが、いつもどおりindex.htmlをindex.phpにして、WP化標準手順を粛々とすすめ、とりあえず、既存CSSをメディアクエリー使って、PC用だけ読み込ませるべくやってみたんだけど、

@import url(“import.css”);

だと何も問題なく別ファイルのCSSが読み込まれるのに、

@media all and (min-width: 768px) {

@import url(“import.css”);

}

とすると、うまくいかない!

いろいろ悩んで対応するも、なんとなくこの方法がいけないのかと思い、Facebookのゼロから始めるWordPress勉強会のグループに

ゼロから始めるWordPress勉強会

すると、WordPress界のキアヌ・リーブスこと、マガリンが、

ゼロから始めるWordPress勉強会 1

マガリンが教えてくれたリンク先はこちら、

CSS 概説 | インポート

つまり、無理とのこと。

まぁ、しょうがないかなぁとおもったら、よつばデザインの後藤さんが、

ゼロから始めるWordPress勉強会 2

とのこと。

そか、CSSを見やすくするためにimportしようとしてたんだけど、SCSSファイルでmixinを使えば同じことか!

2/23追記

>> mixinはこういう使い方ではないらしいです 

ということで、本当は今日はTimingの北村さんのデザイン勉強会で、まさにそのSCSSだったんだけど、いろいろはまって行けなかったので、がんばって自分で勉強して、一皮剥けたいと思います。

デザイン勉強会 @赤羽 | デザインの初心者からデザインを仕事としているプロの方々まで、どなたでもご参加いただけるデザイン勉強会です。

 - WordPress, レスポンシブウェブデザイン