Issue with CSS calc() Expressions Involving Variables

Question

I’m trying to draw CSS octagons both via Sass and not via Sass, and I’m using variables for both versions. I’ve used nearly the same expressions for the square root of 2, width of one triangle, and distance between two triangles inside the octagon.

/* Sass */
$color: #f44;
$sqrt2: sqrt(2);
$octTriW: (100% - (($sqrt2 * 100) / ($sqrt2 + 2))) / 2;
$octTri2Tri: ceil(100% - $octTriW * 2);

.octagon-sass {
  background:
    linear-gradient(-45deg,$color 50%,transparent 50%) 0% 0% / ($octTriW $octTriW),
    linear-gradient(45deg,$color 50%,transparent 50%) 100% 0 / ($octTriW $octTriW),
    linear-gradient(-135deg,$color 50%,transparent 50%) 0 100% / ($octTriW $octTriW),
    linear-gradient(135deg,$color 50%,transparent 50%) 100% 100% / ($octTriW $octTriW),
    linear-gradient($color,$color) 50% 50% / ($octTri2Tri 100%),
    linear-gradient($color,$color) 50% 50% / (100% $octTri2Tri);
}

/* CSS */
:root {
  --color: #f44;
  --sqrt2: 1.4142;
  --octTriW: calc(100% - ((var(--sqrt2) * 100) / (var(--sqrt2) + 2)) / 2);
  --octTri2Tri: calc(100% - var(--octTriW) * 2 + 0.6);
}
.octagon-root {
  background:
    linear-gradient(-45deg,var(--color) 50%,transparent 50%) 0% 0% / var(--octTriW) var(--octTriW),
    linear-gradient(45deg,var(--color) 50%,transparent 50%) 100% 0 / var(--octTriW) var(--octTriW),
    linear-gradient(-135deg,var(--color) 50%,transparent 50%) 0 100% / var(--octTriW) var(--octTriW),
    linear-gradient(135deg,var(--color) 50%,transparent 50%) 100% 100% / var(--octTriW) var(--octTriW),
    linear-gradient(var(--color),var(--color)) 50% 50% / var(--octTri2Tri) 100%,
    linear-gradient(var(--color),var(--color)) 50% 50% / 100% var(--octTri2Tri);
}

/* Base style of shape */
.shape {
  background-repeat: no-repeat;
  display: inline-block;
  outline: 1px solid #bbb;
  width: 200px;
  height: 200px;
}

<div class="shape octagon-sass"></div>
<div class="shape octagon-root"></div>

Right now, there’s no problem with the Sass version, but the regular CSS one won’t appear at all because of something to do with my calc() expressions for --octTriW and --octTri2Tri under :root, and I can’t seem to figure out what it is. Here’s a screenshot of what’s happening (with markings for what the variables are for):

I tried moving the %s around and adding more but had no luck. Any idea what I could be missing or have done incorrectly?

(See demo on CodePen)

In calc() you need to have px . As a test change this: calc(100% - ((var(--sqrt2) * 100) / (var(--sqrt2) + 2)) / 2); to this: calc(100% - ((var(--sqrt2) * 100px) / (var(--sqrt2) + 2)) / 2); — Farzin Kanzi

Marvin Marvin · Accepted Answer · 2017-03-21T21:42:38

Whenever you use addition or subtraction you need to add or subtract pixel or percentage values from your 100%. To be equivalent to your SASS variant, the variable definitions can be fixed by applying % to the calculations. Additionally, you are missing parentheses.

--octTriW: calc((100% - ((var(--sqrt2) * 100%) / (var(--sqrt2) + 2))) / 2);
                ^                           ^                       ^    
--octTri2Tri: calc(100% - var(--octTriW) * 2 + 0.6%);
                                                  ^

Updated Codepen.

Issue with CSS calc() Expressions Involving Variables

1 Answers