14
votes

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.

1
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
Does this answer your question? Sass Variable in CSS calc() functioncyreb7

1 Answers

28
votes

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);
}