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

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

a.info {
	@extend .main;
}

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

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

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

a.info {
	@extend .main !optional;
}