Reputation: 673
Alright I've read about this in a few different guides and blogs but I'm struggling to wrap my head around a proper solution for this.
Let's say I have the following classes in my main styles.scss
file:
.btn {
padding: 5px;
text-transform: uppercase;
}
.btn--with-image {
@extends .btn;
> img {
padding-right: 5px;
margin-left: -5px;
}
}
Now say I have a specific implementation of btn--with-image
that is unique to a specific angular component. To me, it would make sense to embed the css class in myComponent.scss
. Let's do that and create it like this:
.btn--with-image--google {
@extends .btn--with-image;
background-color: blue;
}
Now I would think you can add btn--with-image--google
to an element and you're all set. However, it doesn't work that way. I can't extend btn--with-images
without re-importing the main styles.scss
file which duplicates the styles unnecessarily.
What is the proper way to encapsulate the modifier class in the component with minimal duplication?
Upvotes: 0
Views: 2149
Reputation: 3451
make a mixin instead
create a file name it mixins.scss
@mixin btn-with-image(){
.btn--with-image {
padding: 5px;
text-transform: uppercase;
> img {
padding-right: 5px;
margin-left: -5px;
}
}
}
import this to your myComponent.scss
call it like this
@include btn-with-image()
Hope this helps you, for more info check this.
Upvotes: 2