SASSにおける@extendの!optionalフラグ

セレクタを拡張する際、ディレクティブ@extendが 正しく機能せず、エラーが発生することがあります。 たとえば、次のようなコードがある場合：

style.scssa.info {
  @extend .main;
}

どのセレクタも.mainを含んでいない場合、 コンパイル時にエラーが発生します。 このような場合、セレクタシーケンスを統合する必要があり、 そのためにディレクティブ@extendを使用します。

さらに、.mainを含むセレクタが h1.mainのような場合もエラーになります。 これはaとh1の間の コンフリクトによって説明されます。

そのため、必要に応じて、ディレクティブ@extendが 新しいセレクタを作成しないように許可することができます。 セレクタの後に記述される省略可能フラグ !optionalを使用します。例：

style.scssa.info {
  @extend .main !optional;
}