The !optional tag in @extend in SASS
When extending a selector, you might catch an error when the @extend directive doesn't work correctly. For example, if you have the following code:
a.info {
@extend .main;
}
If no selector contains .main, then a compilation error will occur. In this case, we need to combine selector sequences, for which we use the @extend directive.
Additionally, there will be an error if the selector containing .main is h1.main, which is due to a conflict between a and h1.
Therefore, if necessary, you can allow the @extend directive to not create new selectors by using the optional !optional mark after the selector. For example:
a.info {
@extend .main !optional;
}
