CODEWITHSUNDEEP
csssass
mouchin777
mouchin777

Reputation: 1588

style priority not working as expected in SASS

I have the following scss styles defined in a separate file

.radio-button-focused {
  background-color: $PURPLE;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

.radio-button {
  background-color: $BLACK;
  text-align: left;
  opacity: 1;
  width: px-to-rem(1248px);
  margin-bottom: px-to-rem(15px);
  @include truncate;
}

Both of them are being applied to a button

But the problem is that radio button is overwritting the color of radio-button-focused

I understand that I could use !important , or just use one of them instead of using them both at the same time. But if I was forced to use both, can something else be done to fix this?

Upvotes: 0

Views: 716

Answers (1)

Liftoff
Liftoff

Reputation: 25412

The literal order in the CSS file matters. If two rules have the same specificity, the last one is applied. Move .radio-button before .radio-button-focused. You could also make your focused selector more specific. .radio-button.radio-button-focused for example.

Here's class B before A as an example. 

.b
{
  color: red;
}

.a
{
  color: blue;
}
<div class="a b">Hi</div>

And here's A before B. 

.a
{
  color: blue;
}

.b
{
  color: red;
}
<div class="a b">Hi</div>

Upvotes: 2

Related Questions