CODEWITHSUNDEEP
csssass
quickshiftin
quickshiftin

Reputation: 69581

scss mixin not compiling correctly

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.

Upvotes: 2

Views: 143

Answers (1)

Pytth
Pytth

Reputation: 4176

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".

Upvotes: 2

Related Questions