WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORE SERVER。
(特にWordPress限定ではない)
VSCode設定
Sass編集
大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassをインストール。
コンパイル
- 拡張機能Live Sass Compilerをインストール
- ステータスバー
Watch Sassで監視開始 - Sassを更新 (.css自動生成)
タグ: SASS
SassのSASS記法の為に
SASS記法について調べる時、SassのSASS、SCSSもSassという最悪のググラビリティによって阻まれるSASSの芽を救いたい。もとい自分が模索した記録。
SASS記法のメリット
- 速く、美しく、厳格
SASS記法のデメリット
- 「慣れてるから、みんな使ってるから」と冗長なSCSS記法が支持され、ツール対応が不遇
CSS/SCSS→SASS移行
変換
- SassMeisterの左ペインにCSS/SCSSコードを貼り付け、メニュー
Sass > Sassを選択 - 変換後コードを調整
- 複数行コメントの終了タグ
*/追加 (又は/*→//置換) - include後の改行削除
- インデントがスペースx2になるので好みで置換
- 複数行コメントの終了タグ
- コピーして拡張子.sassで保存