scss で skin を作ってみる−その①

キッカケは Cocoon の Gutenberg 対応

嬉しいニュースですね。

特に thx.jp の様に Classic エディタにあまり頼らずにコンテンツ制作をしていた方には、とてつもない朗報では無いでしょうか。

thx.jp も喜び勇んでインストールしたところ、上記サムネイルの様に編集画面にて背景色が無くなってしまい、難読？な状態となってしまいました。

原因を探ってみると、上記イメージの右下部に

~~background-color: var(--main-color);~~

ふむ、適用されていないですね。理由はよく分かりませんが、おそらく css の変数を使っているのがダメっぽい。

そう言えば、今回の Gutenberg 対応とほぼ同タイミングで Cocoon 1.4.9 が公開されており、エディタのスタイル周りが改良されています。

それ以前は、タイトルの入力も白地に黒文字だったのが、今回の改良に伴い css がエディタ画面にも適用される様になった。しかし、理由は分かりませんが（もしくはそもそも）変数は使えない、といったところでしょう。

ではどうするか？

手っ取り早い方法としては、「変数を使わない」。んが、しかし。 css の保守・管理がとてつもなくメンドくさそう。

そこでふと思う。

そもそも、わいひらさんはどうやってスキンを作ってるんだろう？

わいひらさんの作られた skin-colors のフォルダ周りを調べてみると、どうやら関係のありそうな「scss」フォルダを発見。ソースを拝見したり「scss とは」などでググってみると、どうやらこれで thx.jp のやりたい事が出来そうだ。

早速と準備に取り掛かります。

準備をするだけで一つの記事が書けました。

こちらになります。

上記イメージが作業画面となります。左から、

となっています。「style.scss」内に「@import "thx";」を追加すると、「thx.scss」を css 変換したものが「style.css」の最下部に追加されます。

準備・設定は次の様になります。

ローカル環境にコピーした skin フォルダ内で作業を行います。

今回は、 Cocoon 親テーマの「skin-colors-yellow」をコピーしました。

 // compileExpanded: ../$1.css

これを一行目に追加する事により、「style.scss」より一つ上のフォルダに「style.css」が作成されます。

 // main: style.scss

これを一行目に追加する事により、子 scss を保存すると自動的に「style.scss」がコンパイルされます。

まだまだ準備が整っただけなので、実際のカスタマイズはこれからになります。

「scss」は「css」よりも色々な事が出来そうなので、とても楽しみです。

以下、参考にさせて頂いたページです。

次回に続きます。