Search code examples
sassbulma

Using sass function with !important

I'm using Bulma CSS framework and they use !important on some color styles.

Basically it has this:

.has-text-grey-light {
  color: #b5b5b5 !important;
}

I wanted to override that color on hover like this in my SASS file:

.content ul{
    list-style-type: none;
    margin:0;
    padding:0;
    li{
        a{
            &.has-text-grey-light:hover{
                color: lighten($grey-light, 15%) !important;
            }
        }
    }
}

but the !important rule makes it fail to compile. Any idea if we can use !important with SCSS functions?

Solution

  • stupid Me! it was because I had put the wrong color format and not because of !important. But being in a rush, I didn't read it fully and just assumed it was because of !important. It's working now.