なかちょんブログ

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

複数のCSSファイルを管理するのは、Sassのpartialというアンダーバーをファイル名の前につけてimportするのがいいらしい!

   

昨日書いたレスポンシブWebデザインサイトをつくるときに、デバイスごとのCSSファイルをメディアクエリーで別々に読み込もうとして失敗した件。

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

その後、ねこみみ隊長よつばデザインの後藤さんに、修正&アドバイスを頂き、自分のやりたいことは下記のサイトに書かれていることがわかりました。

↓Sassでファイルを分割して管理する方法について。

ファイルの前にアンダーバー ‘ _ ‘ を使うとpartialといってコンパイラでCSSファイルに変換されないみたいですね。また、Sass内では、どこで@importしても良いようなので、これならmediaqueryの中にも書けそうです(まだ、ためしてないけど)

【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に(partialについて) – CSS HappyLife

↓ CSS@importするとどれだけ読み込み速度に影響するかを検証

以前、WordBench埼玉で、こもりまさあきさんが、CSSファイルを多数importすると速度が遅くなるというお話をされていたけど、こちらのサイトでは方法別に読み込みスピードを検証されています。

【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | クラスメソッド開発ブログ

↓ こもりさんの本はこちら

ということで、前回のブログではmixiinを使えばいいという誤った理解でしたが、Sassでpartialでimportすればいいということがわかりました。

やっぱり、何か新しいことをやろうとすると、一気に知識が増えますね!がんばろう!

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