Property with null value is not omitted if it has !important flag.

Given the following code:

// null value example
$some-value: null !default;

.class {
  color: $some-value;
  color: $some-value !important;
}

The first color property is omitted since it’s value is null. The second is not omitted and invalid CSS is outputted: color: !important;. I’d expect the !important flag not to matter when the value is null and both properties to be omitted, but it’s not that clear to me what the expected result should be from the null page.

This can be worked around by using an if rule around the property using important and checking for the variable, so it’s not a huge issue.

Playground: https://www.sassmeister.com/gist/b04fe1d7b7902c62593b2afac2516e26

[connorskees]

if you need a workaround to get rid of the errors, you can assign to a variable before returning,

@function important-if-not-null($value) {
    @if $value {
        $return: $value !important;
        @return $return;
    } @else {
        @return null;
    }
}

$some-null-value: null;
$some-non-null-value: foo;

a {
    color: important-if-not-null($some-null-value);
    color: important-if-not-null($some-non-null-value);
}

[bcbcbcbcbcl]

@connorskees Thank you so much, really appreciate it.