CODEWITHSUNDEEP
angularsass
Lefka
Lefka

Reputation: 673

Extend SCSS class in component

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

Answers (1)

John Velasquez
John Velasquez

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

Related Questions