Is there a way to add !important to multiple css values with scss?

Question

Let's say I had a few classes that I needed to be able to add !important to the values in the class. Is there an efficient way of doing that? I'm still learning scss so I'm really sorry if this has been asked, I just haven't been able to find the answer.

Update

I did find that I could create a variable and add it to the end of every value like this:

$i: !important;
$button-background-color: #03A9F4;
$button-color: #fff;

.button {
  border-radius:2px$i;
  color: $button-color$i;
  background-color: $button-background-color$i;
  -webkit-transition:all .3s$i;
  transition:all .3s$i;
  border:0px$i;
  padding:0px$i;
  &:hover {
    background-color: lighten( $button-background-color, 20% )$i;
  }
  &.primary {
    height: 40px$i;
  }
  &.secondary {
    height: 30px$i;
    padding:0 10px$i;
  }
}

Is that the fastest way?

Answer 1

I think the best approach with scss is to double up the specificity. You could do something like this:

.parent.parent {}

Everything within will have higher specificity.