How can I pass an expression to a calc() mixin that uses Sass variables

Question

I have a mixin set up to do a cross browser calc,

@mixin calc($property, $expression...) { 
  #{$property}: -moz-calc(#{$expression}); 
  #{$property}: -o-calc(#{$expression}); 
  #{$property}: -webkit-calc(#{$expression}); 
  #{$property}: calc(#{$expression}); 
}

I also have a variable.

$line: 12px;

I want to be able to use a variable within it.

@include calc(width, "30% - ( $line * 2) ) ");

But I'm not sure if that's the best way to go about it.

There's no reason to add a prefix for Opera, since Opera doesn't support `calc()` at all. When they do finally support it, there's no reason to expect it to be prefixed at all. — cimmanon, May 21 '13 at 02:05
Possible Duplicate Visit https://stackoverflow.com/questions/40739695/can-i-update-sass-variables-in-media-queries/54188902#54188902 — Serkan KONAKCI, Jan 14 '19 at 21:11
Does this answer your question? [Sass Variable in CSS calc() function](https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function) — cyreb7, Apr 28 '20 at 19:32

score 31 · Accepted Answer · answered May 21 '13 at 02:00

You'll need to use string interpolation on the value you're passing to the mixin:

.foo {
  @include calc(width, #{"30% -  #{$line * 2}"});
}

Output:

.foo {
  width: -moz-calc(30% - 24px);
  width: -o-calc(30% - 24px);
  width: -webkit-calc(30% - 24px);
  width: calc(30% - 24px);
}

How can I pass an expression to a calc() mixin that uses Sass variables

1 Answers1