Can I conditionally override CSS rule with SASS?

Question

Let's say I want to define a mixin that sets the display property to inline-block only if it is not already set to block .

Here is a hypothetical example (I understand that unless SASS part unless invalid, which I ask):

 @mixin padded padding: $default-padding-y $default-padding-x display: inline-block unless(block) 

Is it possible?

Answer 1

Here's how I approach the situation: take advantage of the fact that the order of your CSS properties matters. Therefore, in your mixin, define the mapping as an inline block; name it in your element; then, under this call, set the mapping to lock by overriding mixin.

 @mixin padded padding: $default-padding-y $default-padding-x display: inline-block .element @include padded display: block 

For this reason, I usually call mixins (or extends) at the top of the ruleset.

Or, if you want to dynamically add an inline block style, you can use JavaScript to find out which display property the element has, and then apply the new class accordingly. You don’t need a Sass mixer for this.