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

1347

Estoy tratando de usar la calc()función 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 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?

GJK
fuente
10
posible duplicado de Usa una variable en un Mixin
cimmanon
19
@ 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 sabe qué tan grande es el contenedor para convertir 100% a px antes de agregar los valores. Esta es la razón exacta por la cual existe calc.
Mog0

Respuestas:

2545

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
sam
fuente
3
box-sizing: border-box;sería el camino ideal, en mi opinión, por supuesto. En general, el modelo de tamaño de la caja debe hacer t
Brandito
¡Muchas gracias! Estaba a punto de ir a la ruta con csscalc(100% - var(--body_padding))
Sylar
51

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

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}
Joao DA SILVA MARLY
fuente
11
¿Qué agrega esto a la respuesta aceptada de hace casi 5 años?
random_user_name
66
Por alguna razón, encuentro esta respuesta más clara. No hago mucho trabajo de scss, así que esto fue "más claro" y más fácil de entender para mí.
2b77bee6-5445-4c77-b1eb-4df3e5
44
Esta es definitivamente una respuesta más clara que la aceptada. 'Interpolar:' no significaba nada para mí.
Jacques Mathieu
3
@JacquesMathieu sass-lang.com/documentation/interpolation - Si no significa nada para ti y es una respuesta con tantos votos, probablemente deberías entender por qué tanto alboroto. Solo mis dos centavos ...
A. Chiesa
1
@UNA. 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 solo hecho de decir una palabra que nunca antes haya escuchado sin una definición o cualquier pretensión no ayuda a crear una respuesta inclusiva. Sin embargo, ese enlace es ciertamente útil. Hubiera sido agradable ver eso en la respuesta aceptada.
Jacques Mathieu
9

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

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

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

Me llevó algún tiempo resolver esto.

Udit
fuente
2

He intentado esto y luego solucioné mi problema. Calculará todos los puntos de ruptura de los medios automáticamente por la tasa dada (tamaño base / tamaño de la 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);
}
Serkan KONAKCI
fuente
0

Aquí hay una solución realmente simple usando 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/

Carl LD
fuente
-2

puedes usar tu verbal #{your verbal}

Girraj
fuente
3
Esto 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?
Mike Poole
Tengo una respuesta
Girraj
-6

Prueba esto:

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

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}
Mas Hary
fuente
3
¿Cómo es esto mejor que la respuesta aceptada arriba? ¿Ni siquiera parece hacer lo mismo ...?
Jules