CODEWITHSUNDEEP
sassmixins
Daniel F
Daniel F

Reputation: 53

Sass mixin doesn't take value but variable name instead

I have simple calc mixin:

@mixin calc($what, $how, $that) {
    width: -webkit-calc($how- $that);
    width: -moz-calc($how - $that);
    width: calc($how- $that);
    width: $how;
}

Which I am using :

@include calc("width", 100%, 6px);

But after compiling I am getting:

  width: -webkit-calc($how- $that);
  width: -moz-calc($how - $that);
  width: calc($how- $that);
  width: 100%;

What I am doing wrong? Why only last line is ok?

Thanks in advance!

Upvotes: 0

Views: 146

Answers (1)

dinocarl
dinocarl

Reputation: 728

You need to use the Sass variable interpolator:

@mixin calc($what, $how, $that) {
  width: -webkit-calc(#{$how}- #{$that});
  width: -moz-calc(#{$how}- #{$that});
  width: calc(#{$how}- #{$that});
  width: $how;
}

.sel {
  @include calc("width", 100%, 6px);
}

yields

.sel {
  width: -webkit-calc(100%- 6px);
  width: -moz-calc(100%- 6px);
  width: calc(100%- 6px);
  width: 100%;
}

Upvotes: 2

Related Questions