🧣
SCSSNestCommenterをつくった
SCSSファイル内の&を使ったネストセレクタに対して、親クラス名を解決したコメントを自動で挿入する Node.js スクリプトです。
拡張機能などでHTMLとCSSを直接リンクできる場合は不要ですが、クラス名の検索が必要な場合には便利です。
仕様
- 指定ディレクトリ配下の全ての
.scss
ファイルを再帰的に探索 -
&
を含むネストセレクタに対し、親クラス名を解決したコメントを自動挿入 - 既に同じコメントが存在する場合は重複挿入しません
- 疑似クラス(
:hover
や::before
など)は除外
動作例
.container {
&__header {
&-title {
color: blue;
}
}
&.-block {
color: red;
}
&:hover {
background-color: red;
}
}
実行後↓
.container {
// container__header
&__header {
// container__header-title
&-title {
color: blue;
}
}
// container -block
&.-block {
color: red;
}
&:hover {
background-color: red;
}
}
Discussion