WordPressのHCBに言語を追加でSASSのシンタックスハイライトを追加したが、判定が不完全なので修正する。
疑似クラス、疑似要素の:にマッチしてセレクタ行がプロパティ判定されている(6,9行目)。
Prism.jsのSASSハイライトを修正
タグ: SASS
WordPressのHCBに言語を追加
Highlighting Code Blockプラグインに対応言語を追加する。
設定
- 管理画面の
設定 > [HCB] 設定 > ヘルプ(最下部)のリンクにアクセス
- 追加したい言語にチェック
DOWNLOAD JSでprism.jsをDLし、テーマフォルダ以下にUP- HCB設定の
使用する言語セットにクラスキー:”言語名”,形式で行を追加- クラスキーはprism.jsの2行目で確認
独自prism.jsにパスを記入し、設定を保存
SASS、AutoHotKey、Batchを追加した。
CSSもDL出来るがHCBと競合した為使用せず。
WordPressのCSSを高速更新
WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)
VSCode設定
Sass編集
大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。
コンパイル
- 拡張機能Live Sass Compilerをインストール
- ステータスバー
Watch Sassで監視開始 - Sassを更新 (.css自動生成)
SassのSASS記法の為に
SASS記法について調べる時、SassのSASS、SCSSもSassという最悪のググラビリティによって阻まれるSASSの芽を救いたい。もとい自分が模索した記録。
SASS記法のメリット
- 速く、美しく、厳格
SASS記法のデメリット
- 「慣れてるから、みんな使ってるから」と冗長なSCSS記法が支持され、ツール対応が不遇
CSS/SCSS→SASS移行
変換
- SassMeisterの左ペインにCSS/SCSSコードを貼り付け、メニュー
Sass > Sassを選択 - 変換後コードを調整
- 複数行コメントの終了タグ
*/追加 (又は/*→//置換) - include後の改行削除
- インデントがスペースx2になるので好みで置換
- 複数行コメントの終了タグ
- コピーして拡張子.sassで保存