CODEWITHSUNDEEP
sassmixins
Michiel
Michiel

Reputation: 8083

SASS mixin not taking variables

I have following mixins in my SASS project:

@mixin define-size($height, $width) {
  width: $width;
  height: $height;
}
@mixin define-square($size) {
  @include define-size($size, $size);
}

And I try to call them, but I get a compile error...
I've tried with:

@mixin define-square(45px);
@mixin define-square(45);
@mixin define-square("45px");
@mixin define-square("45");

And every time, I get the same error:

Invalid CSS after "...   @mixin define-square(": expected variable (e.g. $foo), was "45px);")

Other mixins in the same _mixin.scss are working correctly.
What is my mistake?

Upvotes: 2

Views: 1498

Answers (1)

Rubin
Rubin

Reputation: 126

To call a mixin you use the @include directive, so instead of doing:

@mixin define-square(45px);
@mixin define-square(45);
@mixin define-square("45px");
@mixin define-square("45");

You should be doing:

@include define-square(45px);
@include define-square(45);
@include define-square("45px");
@include define-square("45");

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#including_a_mixin

Re: the error you're getting:

The SASS parser sees @mixin define-square( and assumes you're creating a new mixin, so it correctly expects an argument list, i.e. ($foo, $bar), but instead it gets "45px"... -- and so ends up giving you that error.

Upvotes: 10

Related Questions