css - scss 中的 calc 函数是返回正确的宽度

Question

此代码在 main.scss 文件中。

这里父容器的宽度是 112rem(1120px) 和 1rem 设置为 10px $gutter-horizo​​ntal = 6rem;

.col-2-of-3 {
       
        width: calc(100% - #{$gutter-horizontal} - (100% - 2 * #{$gutter-horizontal}) / 3);
    }

返回宽度为 726.66px 但如果我删除 #{} 如下所示，则宽度为 84.475px

.col-2-of-3 {
       
        width: calc(100% - $gutter-horizontal - (100% - 2 * #{$gutter-horizontal}) / 3);
    }

任何人都可以解释scss如何计算这个宽度。以及除了插值之外 #{} 的用途。

标签： csssassscss-mixinscalcscss-lint