🧣

SCSSNestCommenterをつくった

に公開

SCSSファイル内の&を使ったネストセレクタに対して、親クラス名を解決したコメントを自動で挿入する Node.js スクリプトです。
https://github.com/NettoNeon/ScssNestCommenter

拡張機能などで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