Sass Variable en calc CSS (fonction)

92

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

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

81

<div></div> 

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

76

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

60

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