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

background-color: なし
スポンサーリンク

キッカケは 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 のやりたい事が出来そうだ

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

  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。

scss 環境の構築

Atom を使ってみる

まずは結果から

Atom

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

  1. フォルダツリー
  2. style.scss
  3. thx.scss
  4. style.css

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

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

ファイル環境の準備

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

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

sass-autocompile の設定

style.scss

 // compileExpanded: ../$1.css 

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

scss style.scss @import している scss

 // main: style.scss 

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

まとめ

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

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

次回に続きます

コメント