WordPress / 2020年版 企業サイトを作る / 開発 / XXX CSS を LESS で構築する

WordPress にも CSS をロードする独自の仕組みがあるが、複雑且つ面倒。

今回は Node.js でのテンプレートの構築機構を用意したので、個別にスタイルを読み分けることが容易になっている。 なので、必要な CSS を1ファイルで一発読み込みするために less でビルドしてしまうことにする。

CSS/LESS/Node.js でコンパイルする このへん参照

hoge.ejs というページに対する less ファイルは以下のようになる。 デスクトップファーストで作る。ブレークポイントは適宜調整

• hoge.less 最大画面幅から適用されるスタイル。コンパイルの起点になるファイル
• hoge_0400.less 画面幅 400px 以下の場合のスタイルを記述したモノ
• hoge_0800.less 画面幅 800px 以下の場合のスタイルを記述したモノ
• hoge_1200.less 画面幅 1200px 以下の場合のスタイルを記述したもの
• base.less 画面のどこでも変わらない基本スタイルや変数が書き込まれている
• reset.less ベーススタイルを取ってしまうやつ
• common.less 複数画面共通のレイアウトに関する設定が書かれている
• common_0400.less
• common_0800.less
• common_1200.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