Wie kann ich einen Ausdruck in eine Calc() mixin übergeben, die Sass Variablen

Question

verwendet Ich habe einen mixin einen Cross-Browser-Calc tun einrichten,

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

Ich habe auch eine Variable.

$line: 12px; 

Ich möchte in der Lage sein, eine Variable zu verwenden.

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

Aber ich bin nicht sicher, ob das der beste Weg, um darüber zu gehen.

Answer 1

Sie müssen String-Interpolation auf dem Wert, den Sie vorbei an den mixin verwenden:

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

Ausgang:

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