SCSS mixin second param not compiled properly

Question

I am looking at the mixin documentation and have created a simple mixin

@mixin mobile-pos($property, $offset) {
    // Fallback
    #{$property}: calc(100vh - $offset);

    // Better - for browsers that support custom css vars
    #{$property}: calc(var(--rvh) * 100 - $offset);
}

Here is how I'm using the mixin

#container-circles {
    bottom: unset;
    @include mobile-pos(top, 90px);
}

I checked the compiled CSS output

#container-circles {
  bottom: unset;
  top: calc(100vh - $offset);
  top: calc(var(--rvh) * 100 - $offset); }

Any idea why the second param is not getting compiled properly? I'm using node-sass 4.11.0

Possible duplicate of [Sass Variable in CSS calc() function](https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function) — quickshiftin, Jul 08 '19 at 16:01
Found it, a lingering bug from 2013! `#{$offset}` was the "fix" — quickshiftin, Jul 08 '19 at 16:02

score 0 · Answer 1 · edited Oct 25 '19 at 09:58

0

Using $variables inside your calc() is like this

SCSS

    @mixin mobile-pos($property, $offset) {
      // Fallback
      #{$property}: calc(100vh - #{$offset});

      // Better - for browsers that support custom css vars
      #{$property}: calc(var(--rvh) * 100 - #{$offset});
    }

edited Oct 25 '19 at 09:58

Ganesa Vijayakumar

2,422
5
28
41

answered Oct 25 '19 at 08:28

psevdobrat

1
1

SCSS mixin second param not compiled properly

1 Answers1