SassのSASS記法の為に

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

SASS記法のメリット

  • 速く、美しく、厳格

SASS記法のデメリット

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

SCSS→SASSの移行

変換

SassMeisterの左ペインにSCSSコードを貼り付け、メニューSass > Sassを選択。SASS記法に変換される。
複数行コメントの終了タグ*/追加、include後の改行削除。インデントがスペースx2になるので好みで置換。
拡張子.sassで保存。

規則

不要{ } ;
必要ネスト時のインデント
プロパティ: 値 (半角スペース)
置換@mixin → =
@include → +
エスケープ:root → \:root (エラー対策)
calc(100% – $変数名) → calc(100% – #{$変数名})

VSCodeのSASS環境構築

シンタックスハイライト

拡張機能Sassを入れる。

Emmet

標準対応。効かない場合はコード上部を確認(複数行コメントの終了タグ等)。

コンパイル他(Sass共通)

indent-rainbowでインデント可視化、Live Sass Compilerで自動コンパイル。
コンパイル設定をCompressedにする場合、WordPressのテーマ情報やクレジットなど必要なコメントは/*!*/で囲む。