I have something like this in one of my SCSS include files:
$inputBorderRadius: 0 !default;
.input {
@include border-radius($inputBorderRadius);
}
This works fine; I can override the $inputBorderRadius
before including the above code and everything behaves the way I expect.
What I'm wondering is whether there's a way to tell SASS not to generate the border-radius
rule at all if (for example) $inputBorderRadius
is null. In my case, I just don't want to generate superfluous rules like border-radius: 0
that specify the default.
I am aware of the @if
directive, but the documentation says:
Note that control directives are an advanced feature, and are not recommended in the course of day-to-day styling.
Am I thinking about this all wrong? I'm fairly new to SASS, so I hope this isn't too much of a n00b question.
You just want to use the
null
value in place of0
. Null is available now in Sass 3.2, and doesn't output the property when it is the only value.You can also take that warning more lightly. You don't want to get carried away with control directives in normal use, but they aren't going to hurt anything when you need them. There's a helpful
if($test, $true, $false)
function for the simpler cases as well.