Frage Sass-Variable in der CSS-Funktion calc ()


Ich versuche das zu benutzen calc() Funktion in einem Sass Stylesheet, aber ich habe einige Probleme. Hier ist mein Code:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

Wenn ich das Literal benutze 50px statt meiner body_padding Variable, ich bekomme genau das, was ich will. Wenn ich jedoch auf die Variable umschalte, ist dies die Ausgabe:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

Wie kann ich Sass erkennen lassen, dass er die Variable innerhalb der ersetzen muss? calc Funktion?


764
2017-07-31 22:30


Ursprung


Antworten:


Interpolieren:

body
    height: calc(100% - #{$body_padding})

Für diesen Fall, Rand-Box würde auch ausreichen:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding

1515
2017-11-27 07:40



Versuche dies:

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}

-4
2018-04-21 08:01