css - HTML/SASS 元素的无效属性值

Question

我的元素高度有一个无效的属性值，我不知道为什么。
这是我的 SASS 代码:

.iconDiv {
    $iconDivSize: 200px;
    .icon {
        $iconDeltaHeight: calc(#{$iconDivSize} / 60.8);
        $iconHeight: calc(#{$iconDeltaHeight} * #{$iconDivSize});
        height: $iconHeight;
    }
}

我的输出元素高度是:calc(calc(200px/60.8) * 200px)，但是无效...为什么？

Answer 1

两个问题，你不能嵌套计算，你只能有一个单位声明。

你需要类似的东西

$iconDivSize: 200;
.iconDiv {    
    .icon {        
        height: calc(#{$iconDivSize}px / 60.8 * #{$iconDivSize});
    }
}

Demo