como - Variable de Sass en la función CSS calc()

css variables

Question

Estoy tratando de usar la función calc() en una hoja de estilo Sass, pero tengo 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 lugar de mi variable body_padding , obtendré exactamente lo que quiero. Sin embargo, cuando cambio a la variable, esta es la salida:

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

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

Answer 1

Aquí hay una solución realmente simple utilizando SASS / SCSS y un estilo de fórmula matemática:

/* frame circle */
.container {
    position: relative;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    width: 400px;
    height: 400px; }

/* circle sectors */
.menu-frame-sector {
    position: absolute;
    width: 50%;
    height: 50%;
    z-index: 10000;
    transform-origin: 100% 100%;
  }

$sector_count: 8;
$sector_width: 360deg / $sector_count;

.sec0 {
    transform: rotate(0 * $sector_width) skew($sector_width);
    background-color: red; }
.sec1 {
    transform: rotate(1 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec2 {
    transform: rotate(2 * $sector_width) skew($sector_width);
    background-color: red; }
.sec3 {
    transform: rotate(3 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec4 {
    transform: rotate(4 * $sector_width) skew($sector_width);
    background-color: red; }
.sec5 {
    transform: rotate(5 * $sector_width) skew($sector_width);
    background-color: blue; }
.sec6 {
    transform: rotate(6 * $sector_width) skew($sector_width);
    background-color: red; }
.sec7 {
    transform: rotate(7 * $sector_width) skew($sector_width);
    background-color: blue; }

Para concluir, te sugiero que comprendas transform-origin , rotate() y skew() :

https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Answer 2

Interpolar:

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

Para este caso, border-box también sería suficiente:

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

Answer 3

Para usar $variables dentro de tu calc() de la propiedad height:

Html

<div></div>

Scss

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

Answer 4

Prueba esto:

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

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