CSS CombでModifierクラスを指定するとエラーが出る時の対処法

SASSの整形ツールにVisual Studio Codeの拡張機能であるCSS Combを利用しています。FLOCSS等のCSS設計で用いる&.--というModifierクラスを指定するとエラーが出てしまうので、その対処法です。

エラー例

Parsing error: ...scss/object/components/_button.scss
Please check validity of the block starting from line #27
CSScomb Core version: 4.3.0
27*|   &.--danger {
28 |     background: #000000;
29 |   }

SCSS自体はコンパイルできるので問題はないのですが、エラーが出ると気になってしまうので次のように設定しています。なお、Modifierクラスは.c-button--dangerのようにコンポーネントクラスに繋げる書き方が主流で同様のエラーが気になる方は少ないかもしれません。

(FLOCSSのクラス設計上、ひとつのクラスに対してModifierクラスが重複することで不具合が発生することはあまりないと思うので、個人的にこの書き方をしています。)

対処法

&.--がエラー箇所になっていたので、エラー箇所を変数っぽく囲ってみたらエラーが解消されました。

/*before*/
&.--danger {
    background: #000000;
}
/*after*/
&.#{--danger} {
    background: #000000;
}

対処療法ですが、SCSSのコンパイル時にもエラーは出なさそうなので、この書き方で使うようにしています。(もっと良い書き方等あればぜひコメントでお知らせください。)

ー この記事をシェアする? ー

この記事にコメントする

このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。