Conditional in SASS mixin throws error

Question

I'm trying to create a mixin using conditionals but I'm getting an error at compile time. The error being generated is:

Error: Properties are only allowed within rules, directives, mixin includes, or other properties.

Here's the code that I'm using:

@mixin mypadder ($topBottomBoth: myDefaultOption, $topUnits: 0, $bottomUnits: 0) {
    @if $topBottomBoth == tp {
        padding-top: 1em;
        }
    @else if $topBottomBoth == bt {
        padding-bottom: 1em;
        }
    @else {
        padding-top: 1em;
        padding-bottom: 1em;
        }
    }

I've also tried putting the value of the $topBottomBoth parameter in quotes, firstly just where it appears in the parameters (first line of the mixin) and then additionally putting quotes around the values of that variable/parameter in the conditional tests. In every case I get the same error. Having looked at numerous examples of conditional mixins I still cannot see where my syntax is wrong.

Answer 1

There's nothing wrong with your mixin, you're just calling it wrong. Sass knows that CSS properties are not allowed outside of selectors.

Incorrect:

@include mypadder;

Correct:

.foo {
    @include mypadder;
}