CODEWITHSUNDEEP
sass
Exitos
Exitos

Reputation: 29720

How Do I Stop SASS Duplicate CSS?

I have the following SCSS.

.mat-tab-label { 
  &:focus {
    background-color: #1976d2 !important; color:white;
  }
}

.mat-tab-label-active {
  background-color: #1976d2 !important; color:white;
}

Both selectors need the same properties but how to I remove the duplication? Variables only store single values.

Upvotes: 2

Views: 1888

Answers (2)

Flying
Flying

Reputation: 4560

You can use styles extending functionality and placeholder selectors to achieve your goal:

%tab-label {
    background-color: #1976d2 !important; 
    color:white;
}

.mat-tab-label { 
  &:focus {
    @extend %tab-label;
  }
}

.mat-tab-label-active {
    @extend %tab-label;
}

Upvotes: 1

user1986938
user1986938

Reputation: 56

Check out sass basics here

Search for extend/inherirance section and mixin section. Both provide options to reuse your CSS rules across your sass files.

Upvotes: 1

Related Questions