scss mixin not compiling correctly

Question

I'm trying to size some text relative to the viewport, and found this thread.

I'm now experimenting with the idea of using something akin to this answer

font-size: calc(3vw + 3vh);

So I came up with this scss

/* Font sizing based on size of the viewport */
@mixin vp-font-size($multiplier: 1) {
  font-size: calc((1vw + 1vh) * $multiplier);
}
.vp-font-size {
  p {
    @include vp-font-size(.8);
  }
  .h6 {
    @include vp-font-size(.9);
  }
  .h5 {
    @include vp-font-size(1.0);
  }
  .h4 {
    @include vp-font-size(1.1);
  }
  .h3 {
    @include vp-font-size(1.2);
  }
  .h2 {
    @include vp-font-size(1.3);
  }
  .h1 {
    @include vp-font-size(1.4);
  }
}

However, it's compiling to this

.vp-font-size p {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h6 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h5 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h4 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h3 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h2 {
  font-size: calc((1vw + 1vh) * $multiplier); }

.vp-font-size .h1 {
  font-size: calc((1vw + 1vh) * $multiplier); }

When I put something like font-size: calc((1vw + 1vh) * 1.1), my browser can understand it. So is there something wrong with the scss parser I'm using?

I was reading the scss documentation and it seems valid. I'm using node-sass.

Pytth · Accepted Answer · 2018-07-20T21:56:44.167

2

Your syntax is slightly off. On the line with calc, $multiplier should be #{$multiplier}

@mixin vp-font-size($multiplier: 1) { font-size: calc((1vw + 1vh) * #{$multiplier}); } .vp-font-size { p { @include vp-font-size(.8); } .h6 { @include vp-font-size(.9); } .h5 { @include vp-font-size(1.0); } .h4 { @include vp-font-size(1.1); } .h3 { @include vp-font-size(1.2); } .h2 { @include vp-font-size(1.3); } .h1 { @include vp-font-size(1.4); } }

Edit:

Here is a link to a codepen with the SCSS. To view the compiled code, click the carrot in the top right of the CSS panel and "View compiled CSS".

edited Jul 20 '18 at 21:56

answered Jul 20 '18 at 21:39

Pytth

4,008
24
29

Thanks dude, it's compiling! Can you share a link to that syntax, and perhaps an explanation thereof? – quickshiftin Jul 20 '18 at 21:50
Hey man, IDK if I can explain it much more than I did at the start of the answer. I just looked and noticed that when you were trying to use the `$multiplier` argument in the body of the mixin, that you had forgotten to wrap it in `#{ }`. – Pytth Jul 20 '18 at 21:58
Hmm, it's interesting because I don't see that being used in the [documentation](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins-arguments). – quickshiftin Jul 21 '18 at 00:54
I found it, it's called [interpolation](https://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_) – quickshiftin Jul 21 '18 at 14:14

scss mixin not compiling correctly

1 Answers1