How to add !important to @include opacity(1) in compass

Question

I am using compass. Is there any way to add !important to @include opacity(1)?

Thanks!

score 5 · Accepted Answer · answered Jun 13 '13 at 13:03

5

Yes. You can use @if and @else

=opacity($opacity, $important: no)
    @if $important == isImportant
        opacity: $opacity !important
        $opacity-ie: $opacity * 100
        filter: alpha(opacity=$opacity-ie) !important //IE8
    @else
        opacity: $opacity
        $opacity-ie: $opacity * 100
        filter: alpha(opacity=$opacity-ie) //IE8


.some-class
    +opacity(1) // without !important

.some-class
    +opacity(1, isImportant) // with !important

if it is what u ment

answered Jun 13 '13 at 13:03

Pavel

412
3
6

just to note the slight syntactical difference in using SCSS, stumped me for a minute. http://stackoverflow.com/questions/5456467/syntax-for-if-else-condition-in-scss-mixin – sledgeweight Aug 14 '14 at 13:27

score 2 · Answer 2 · answered May 21 '16 at 22:59

This is the same code in SCSS syntax, maybe someone can use it:

@mixin opacity($opacity, $important: 0) {
  @if $important == 1 {
    opacity: $opacity !important;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie) !important; //IE8
  }
  @else {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
  }
}

.some-class
     @include opacity(1); // without !important

.some-class
     @include opacity(1,1); // with !important

score 0 · Answer 3 · answered Apr 08 '19 at 17:36

0

A bit late, but this might be useful to someone out there. You could simply specify !important as part of the property value:

@include opacity(1 !important);

It might not work in every case depending on your mixin structure, but in most cases it should.

answered Apr 08 '19 at 17:36

Rodrigo D'Agostino

671
5
22

How to add !important to @include opacity(1) in compass

3 Answers3