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で保存

規則

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

VSCode環境構築

シンタックスハイライト

  • 拡張機能Sassをインストール

Emmet

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

コンパイル他(Sass共通)

indent-rainbowでインデント可視化、Live Sass Compilerで自動コンパイル。

コンパイル設定をCompressedにする場合、WordPressのテーマ情報やクレジットなど必要なコメントは/*!～*/で囲む。

関連記事