Pregunta Variable Sass en la función CSS calc ()


Estoy tratando de usar el calc() funcionar en una hoja de estilo Sass, pero estoy teniendo algunos problemas. Aquí está mi código:

$body_padding: 50px

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

Si uso el literal 50px en lugar de mi body_padding variable, obtengo exactamente lo que quiero. Sin embargo, cuando cambio a la variable, este es el resultado:

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

¿Cómo puedo hacer que Sass reconozca que necesita reemplazar la variable dentro del calc ¿función?


764
2017-07-31 22:30


origen


Respuestas:


Interpolar:

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

Para este caso, caja de frontera también sería suficiente:

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

1515
2017-11-27 07:40



Prueba esto:

@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