menu
書いてる野郎
orebike@gmail.com
WordPress にも CSS をロードする独自の仕組みがあるが、複雑且つ面倒。
今回は Node.js でのテンプレートの構築機構を用意したので、個別にスタイルを読み分けることが容易になっている。 なので、必要な CSS を1ファイルで一発読み込みするために less でビルドしてしまうことにする。
CSS/LESS/Node.js でコンパイルする このへん参照
hoge.ejs というページに対する less ファイルは以下のようになる。 デスクトップファーストで作る。ブレークポイントは適宜調整
やや多いが、このようなファイルで構成されるようにする。 こいつらを hoge.less の中でこのようにロードする。
@import "reset.less"; @import "base.less"; @import "common.less"; // ページ固有のスタイルを body からわかりやすい範囲でフル階層で書く body{ } @import "common_1200.less"; @import "hoge_1200.less"; @import "common_0800.less"; @import "hoge_0800.less"; @import "common_0400.less"; @import "hoge_0400.less";
memo
@media screen and (max-width: 400px){ } @media screen and (max-width: 800px){ } @media screen and (max-width: 1200px){ } @import (multiple) "piyo.less";
こいつをこのようにコンパイルすればよい
$ npx lessc --clean-css="-s1" --autoprefix="defaults" hoge.less hoge.css