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

1677

Estoy tratando de usar la calc()función en una hoja de estilo de Sass, pero tengo algunos problemas. Aquí está mi código:

$body_padding: 50px

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

Si utilizo el literal en 50pxlugar de mi body_paddingvariable, obtengo 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 calcfunción?

2
  • 10
    posible duplicado de Usa una variable en un Mixin 31/07/2013 a las 22:36
  • 21
    @ user3705055 Necesita calc ya que Sass no puede calcular 100% - 50px ya que las unidades son diferentes. Esto solo puede ser calculado por el navegador, una vez que sepa el tamaño del contenedor para convertir el 100% a px antes de agregar los valores. Esta es la razón exacta por la que existe calc.
    Mog0
    18 de julio de 2016 a las 16:05
3166

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
2
  • 4
    box-sizing: border-box;sería el camino ideal a seguir, en mi opinión, por supuesto. En general, el modelo de dimensionamiento de la caja debe hacer t 21 de junio de 2018 a las 3:18
  • 1
    ¡Muchas gracias! Estaba a punto de tomar la ruta css concalc(100% - var(--body_padding))
    Sylar
    14 de mayo de 2019 a las 5:19
108

Para usar $variablesdentro de su calc()propiedad de altura:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
6
  • 9
    Por alguna razón, encuentro esta respuesta más clara. No hago mucho trabajo de scss, así que esto fue "más sencillo" y más fácil de entender para mí. 3 de mayo de 2019 a las 15:15
  • 6
    Esta es definitivamente una respuesta más clara que la aceptada. 'Interpolar:' no significó nada para mí. 5 de agosto de 2019 a las 16:15
  • 5
    @JacquesMathieu sass-lang.com/documentation/interpolation : si no significa nada para usted y es una respuesta con tantos votos, probablemente debería comprender de qué se trata el alboroto. Solo mis dos centavos ... 21/08/19 a las 22:04
  • 2
    @A. Chiesa seguro, eso define la interpolación. Sin embargo, el OP y yo no sabíamos de la interpolación en SASS, de lo contrario, esta pregunta nunca se habría hecho. Por lo tanto, el simple hecho de decir una palabra que tal vez nunca haya escuchado antes sin una definición o cualquier pretensión no ayuda a crear una respuesta completa. Sin embargo, ese vínculo es ciertamente útil. Hubiera sido bueno ver eso en la respuesta aceptada. 31/08/19 a las 18:48
  • Estuve atrapado en esto durante más de 1 hora. 13/08/20 a las 12:54
29

Aunque no está directamente relacionado. Pero descubrí que el código CALC no funcionará si no coloca los espacios correctamente.

Entonces esto no funcionó para mí calc(#{$a}+7px)

Pero esto funcionó calc(#{$a} + 7px)

Me tomó algún tiempo darme cuenta de esto.

3
  • Además, calcno se permite un espacio adicional después . calc (#{$a} + 7px)no funcionará.
    Entara
    12/08/20 a las 8:16
  • La persona de arriba usó los espacios correctamente, por lo que esto realmente no responde a su pregunta, pero respondió a la mía. ¡Gracias! 9/09/20 a las 0:38
  • Sí, esto funcionó para mí. Probé altura: calc (100% -95px); (es decir, sin el espacio adecuado) al principio y no funcionó. Pero con el espaciado adecuado funcionó sin interpolación. 12 de febrero a las 6:25
5

Probé esto y luego solucioné mi problema. Calculará todos los puntos de interrupción de los medios automáticamente según la tasa dada (tamaño base / tamaño de tasa)


$base-size: 16;
$rate-size-xl: 24;

    // set default size for all cases;
    :root {
      --size: #{$base-size};
    }

    // if it's smaller then LG it will set size rate to 16/16;
    // example: if size set to 14px, it will be 14px * 16 / 16 = 14px
    @include media-breakpoint-down(lg) {
      :root {
        --size: #{$base-size};
      }
    }

    // if it is bigger then XL it will set size rate to 24/16;
    // example: if size set to 14px, it will be 14px * 24 / 16 = 21px
    @include media-breakpoint-up(xl) {
      :root {
        --size: #{$rate-size-xl};
      }
    }

@function size($px) {
   @return calc(#{$px} / $base-size * var(--size));
}

div {
  font-size: size(14px);
  width: size(150px);
}
2

Aquí hay una solución realmente simple que usa 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, sugiero encarecidamente que para comprender transform-origin, rotate()y skew():

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

0
-4

puedes usar tu verbal #{your verbal}

2
  • 3
    Esta parece una respuesta extraña. Supongo que quiere decir, variablepero dado que el OP sabe qué es una variable (especifican $body_paddingen su código), ¿qué agrega su respuesta? 10/07/19 a las 16:52
  • Tengo dando respuesta
    Girraj
    12/07/19 a las 12:37
-7

Prueba esto:

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

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
2
  • 3
    ¿Cómo es esto mejor que la respuesta aceptada anterior? ¿Ni siquiera parece hacer lo mismo ...?
    Jules
    23 de julio de 2017 a las 3:06
  • No funcionará por la misma razón que el código de la pregunta.
    Qwertiy
    3 de agosto a las 18:24