How can I derive one css style form antoher

March 15, 2024

I have two styles defined like so in my css file:

.open_in_new {
  font-size: 18px;
  margin-top: 5px;
  color: mat-color($teal, 500);
}

.open_in_new_disabled {
  font-size: 18px;
  margin-top: 5px;
  color: mat-color($grey, 500);
}

So, I could use either of these in my html, e.g.:

<mat-icon class="open_in_new_disabled">open_in_new</mat-icon>

Is there any way to remove the redundancy in my style declarations? I am defining font-size: 18px and margin-top: 5px twice over.

Is there a way to declare .open_in_new_disabled as having all of the styles of .open_in_new excepting for a different colour?

>Solution :

Do you mean something like this?

.open_in_new,
.open_in_new_disabled {
  font-size: 18px;
  margin-top: 5px;
}

.open_in_new {
  color: mat-color($teal, 500);
}

.open_in_new_disabled {
  color: mat-color($grey, 500);
}

This (the first CSS ruleset) is called grouping, and you can read more about it here.

The other option is to use attribute selectors. For example:

[class*="open_in_new"] {
  font-size: 18px;
  margin-top: 5px;
}

.open_in_new {
  color: mat-color($teal, 500);
}

.open_in_new_disabled {
  color: mat-color($grey, 500);
}

The attribute selector (class, in this case) uses a partial match based on the class name. It’s saying something along the lines of "match every element with the classname which contains open_in_new".