从@include调用时未传递Sass Mixin值

Question

I have couple of partials(say _one.scss and _two.scss) which am calling into a SASS. _one.scss has following code

@mixin wire($num) {
 .parts-field {
  height: 100%;
width: calc(100% * (1/$num) - 10px - 1px);
}

And in _two.scss has .mytry { @include wire(3); } .mytry { @include wire(3); }

In my main.scss am doing the following

@import "../../base/_one.scss"; 
@import "_two.scss";

When I check main.css , it shows the following:

.mytry .parts{
height: 100%;
width: calc(100% * (1/$num) - 10px - 1px);
}

Even though am saying @include wire(3) , I believe the 3 is not getting passed. Styles are not applying on the HTML either. Is there something fundamentally wrong am doing with param passing to mixins?

Answer 1

You need to use string interpolation, ie replace $num with #{$num} :

@mixin wire($num) {
  .parts-field {
    height: 100%;
    width: calc(100% * (1/#{$num}) - 10px - 1px);
  }
}

The reason why this is needed because SASS will treat (...) as a calculation that has to be evaluated during compilation, and it does not know that calc(...) should be interpreted as a string and not a mathematical expression.