タグ: SASS

WordPressのHCBに言語を追加

Highlighting Code Blockプラグインに対応言語を追加する。

設定

  1. 管理画面の設定 > [HCB] 設定 > ヘルプ(最下部)のリンクにアクセス
  2. 追加したい言語にチェック
  3. DOWNLOAD JSでprism.jsをDLし、テーマフォルダ以下にUP
  4. HCB設定の使用する言語セットにクラスキー:”言語名”,形式で行を追加
    • クラスキーはprism.jsの2行目で確認
  5. 独自prism.jsにパスを記入し、設定を保存

SASS、AutoHotKey、Batchを追加した。
CSSもDL出来るがHCBと競合した為使用せず。

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORESERVER。
(特にWordPress限定ではない)

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。

コンパイル

  1. 拡張機能Live Sass Compilerをインストール
  2. ステータスバーWatch Sassで監視開始
  3. Sassを更新 (.css自動生成)
続きを読む WordPressのCSSを高速更新

SassのSASS記法の為に

SASS記法について調べる時、SassのSASS、SCSSもSassという最悪のググラビリティによって阻まれるSASSの芽を救いたい。もとい自分が模索した記録。

SASS記法のメリット

  • 速く、美しく、厳格

SASS記法のデメリット

  • 「慣れてるから、みんな使ってるから」と冗長なSCSS記法が支持され、ツール対応が不遇

CSS/SCSS→SASS移行

変換

  1. SassMeisterの左ペインにCSS/SCSSコードを貼り付け、メニューSass > Sassを選択
  2. 変換後コードを調整
    • 複数行コメントの終了タグ*/追加 (又は/*→//置換)
    • include後の改行削除
    • インデントがスペースx2になるので好みで置換
  3. コピーして拡張子.sassで保存
続きを読む SassのSASS記法の為に