Sass Variable in CSS calc function

Question

I m trying to use the calc   function in a Sass stylesheet  but I m having some issues  Here s my code   body padding  50px  body     padding-top   body padding     height  calc 100  -  body padding   If I use the literal 50px instead of my body padding variable  I get exactly what I want  However  when I switch to the variable  this is the output  body       padding-top  50px      height  calc 100  -  body padding      How can I get Sass to recognize that it needs to replace the variable within the calc function

User · Answer

Here is a really simple solution using SASS/SCSS and a math formula style:

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

To conclude, I strongly suggest you to understand transform-origin, rotate() and skew():

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

User · Answer

I have tried this then i fixed my issue  It will calculate all media-breakpoint automatically by given rate  base-size rate-size     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

User · Answer

Even though its not directly related  But I found that the CALC code won t work if you do not put spaces properly   So this did not work for me calc    a  7px   But this worked calc    a    7px   Took me sometime to figure this out

User · Answer

Interpolate   body     height  calc 100  -    body padding     For this case  border-box would also suffice   body     box-sizing  border-box     height  100      padding-top   body padding

User · Answer

To use  variables inside your calc   of the height property   HTML    lt div gt  lt  div gt    SCSS    a  4em   div     height  calc    a    7px     background   e53b2c

User · Answer

Try this    mixin heightBox  body padding      height  calc 100  -  body padding      body      include heightBox 100  - 25       box-sizing  border-box    padding 10px

User · Answer

you can use your verbal   your verbal

[css] Sass Variable in CSS calc() function

Examples related to css

Examples related to sass

Examples related to css-calc