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:

style.scssa.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:

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