CSS calc () Sass variable in the function

This translation from: Sass CSS Variable in Calc () function

At The I'm Trying to use the I calc()function in A Sass stylesheet, But the I'm the HAVING AND DELINQUENCY some. I'm trying to use Sass stylesheet calc()function, but encountered some problems. Here's my code: This is my code:

$body_padding: 50px

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

The I use at The literal IF 50pxINSTEAD of My body_paddingvariable, the I GET the What exactly the I want. If I use text 50pxinstead of my body_paddingvariables, I get what I want. However, when I switch to the variable , this is the output: But when I switched to variable, which is the output:

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

Sass to the I CAN GET How Recognize that IT Needs at The variable to the replace the WITHIN at The calcfunction? How to make Sass realized it needed to replace calcthe function of the variables?

---

#1st Floor

Reference: https://stackoom.com/question/1DRy3/CSS-calc- function of variables Sass

---

#2nd Floor

To Interpolate : Interpolation :

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

The this Case the For, border-Box Would Suffice Also: In this case, border-Box is enough:

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

---

#3rd floor

Try this: Try this:

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

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

---

#4th floor

Use the To $variablesInside your calc()of The height Property: To height properties calc()in use $variables:

HTML: HTML：

<div></div>

SCSS: SCSS：

$a: 4em;

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

---

#5th Floor

Here is a really simple solution using SASS / SCSS and a math formula style: This is a use SASS / SCSS mathematical formulas and style of a very simple solution:

/* 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; }

Conclude the To, the I Strongly Suggest is you to Understand transform-origin, rotate()and skew(): Finally, I strongly encourage you to learn transform-origin, rotate()and skew():

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

---

#6th floor

I have tried this then i fixed my issue. I've tried, and then solve the problem. It will calculate all media-breakpoint automatically by given rate (base-size / rate-size) it (basic size / rate size) automatically calculates all media according to a given rate breakpoints

$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);
}