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

既存の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界のキアヌ・リーブスこと、マガリンが、

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

つまり、無理とのこと。

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

とのこと。

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

2/23追記

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

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