CSS (scss) 變量計算返回錯誤

Question

$toggle-width: var(--width);
$toggle-padding: $toggle-width/10 * 1.5;

我正在嘗試使這個 css(scss) 工作，此時我可以創建變量並將它們插入到我的 HTML (vue js) 中以創建一個動態變化的元素。

<span :class="{'not-active': computedValue == false}"
              :style="{'--width':width_t}"
              class="toggle -round ">

但我不斷收到錯誤

   $toggle-padding: $toggle-width/10 * 1.5;
                ^
      Undefined operation "var(--width)/10 * 1.5".
   ╷
57 │ $toggle-padding: $toggle-width/10 * 1.5;
   │                  ^^^^^^^^^^^^^^^^^^^^^^
   ╵

有任何想法嗎？

Answer 1

我自己修的...

 $toggle-width: var(--width);
    $toggle-padding: calc(var(--width) / 10 * 1.5);

但是如果我想進行任何進一步的計算，我不能調用 SCSS 變量，我必須使用 var(--width)，並進行計算，以進一步改變它。 像這樣：

top: $toggle-padding;
left: $toggle-padding;
content: "";
width: calc(var(--width) - (var(--width) / 10 * 1.5) * 2);
height: calc(var(--width) - (var(--width) / 10 * 1.5) * 2);

無論如何感謝您的幫助。