After doing some research and reading various guides and blogs, I am still struggling to find the right solution for this issue.
Imagine having the following classes in your main styles.scss file:
.btn {
padding: 5px;
text-transform: uppercase;
}
.btn--with-image {
@extends .btn;
> img {
padding-right: 5px;
margin-left: -5px;
}
}
Suppose you need a specific implementation of btn--with-image that is unique to a particular angular component. It would seem logical to embed the CSS class in myComponent.scss. Let's create it like this:
.btn--with-image--google {
@extends .btn--with-image;
background-color: blue;
}
It might seem like adding btn--with-image--google to an element should work flawlessly. However, unfortunately, extending btn--with-images requires re-importing the main styles.scss file, resulting in unnecessary style duplication.
What is the most effective way to encapsulate the modifier class in the component with minimal redundancy?