Question Variable Sass dans la fonction CSS calc ()


J'essaie d'utiliser le calc() fonctionner dans une feuille de style Sass, mais j'ai quelques problèmes. Voici mon code:

$body_padding: 50px

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

Si j'utilise le littéral 50px au lieu de mon body_padding variable, je reçois exactement ce que je veux. Cependant, quand je passe à la variable, c'est la sortie:

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

Comment puis-je faire comprendre à Sass qu'il doit remplacer la variable dans le calc fonction?


764
2017-07-31 22:30


origine


Réponses:


Interpoler:

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

Pour ce cas, border-box suffirait aussi:

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

1515
2017-11-27 07:40



Essaye ça:

@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