CSS calc（）に関する問題変数に関係する式

Question

Sass経由でCSS八角形を描画しようとしていますが、私は両方のバージョンで変数を使用しています。私は、2の平方根、1つの三角形の幅、および8角形の内部の2つの三角形間の距離について、ほぼ同じ表現を使用しました。今

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

、サスのバージョンに問題はありませんが、定期的なCSSの一つがあるため:root下--octTriWと--octTri2Triのための私のcalc()表現とは何かをまったく表示され、およびIません。それが何であるか把握していないようです。ここでは（変数がためのものです何のためにマーキングして）何が起こっているかのスクリーンショットです：

私は％sの周りを移動し、より多くを追加しようとしたが、運がなかったです。何が欠けているのか、間違ってしまったのでしょうか？

（CodePenでデモを参照してください）

Answer 1

あなたは加算または減算を使用するたびに、あなたの100%からピクセルまたはパーセント値を追加または削除する必要があります。 SASSバリアントと同等にするには、%を計算に適用して変数定義を修正することができます。さらに、カッコがありません。 （計算値 `で

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

Updated Codepen.