Как передать выражение методу calc(), в котором используются переменные Sass

У меня есть mixin, настроенный для перекрестного браузера,

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

У меня также есть переменная.

$line: 12px;

Я хочу иметь возможность использовать переменную внутри нее.

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

Но я не уверен, что это лучший способ сделать это.

Ответы

Ответ 1

Вам нужно использовать интерполяцию строк для значения, которое вы передаете в mixin:

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

Вывод:

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