Implement ability to increase a selector specificity by some syntax sugar

Hey, everyone knows that using of important in CSS is the biggest evil. But there is one good hack for it — selector repeat, for example:

.link {
color: red;
font-size: 24px;
line-height: 24px;
}

.link { // without hack
color: green !important;
font-size: 26px !important;
line-height: 26px !important;
}

.link.link { // with hack
color: green;
font-size: 26px;
line-height: 26px;
}

it’s really helpful, I have tried to do it with SCSS:

.class1__el {
padding: 10px;
}
@media only screen and (max-width : 700px) {
    .class1 {
      &__el#{&}__el {
        padding: 27px 31px 27px;
    }
}

it works but it looks strange, also what will be if I need to increase specificity again and again?

I suggest adding some syntax sugar here, something like:

    .class1 {
      &__el:set-specificity(4) {
        padding: 27px 31px 27px;
      }
   }

that will be compiled to

.class1__el.class1__el.class1__el.class1__el {
    padding: 27px 31px 27px;
}

[esr360]

@hardrese7 I guess if anything I’m suggesting that if you find yourself having to do this it probably means you have some inefficiencies elsewhere in your codebase.

[maxcooper]

If anyone else finds this issue looking for a good way to increase specificity, here’s a mixin that adds :nth-child(n) to the parent selector, which increases the specificity while selecting the same elements:

@mixin increase-specificity($amount: 1) {
  $suffix: '';
  @for $i from 0 to $amount {
    $suffix: $suffix + ':nth-child(n)';
  }
  &#{$suffix} {
    @content;
  }
}

To use:

.myClass {
  @include increase-specificity(4) {
    content: 'I am specific!';
  }
}

Which emits:

.myClass:nth-child(n):nth-child(n):nth-child(n):nth-child(n) {
  content: 'I am specific!';
}