sass - Sass 変数を使用する calc() mixin に式を渡すにはどうすればよいですか

Question

クロスブラウザの計算を行うようにミックスインをセットアップしましたが、

@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) ) ");

しかし、それが最善の方法であるかどうかはわかりません。

Answer 1

ミックスインに渡す値に文字列補間を使用する必要があります。

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