html - 使用百分比和像素计算时的 Sass 错误

Question

我希望能够有一个响应式网格，我可以输入我的列和我的填充值。

@mixin setColumnWidth($columns, $margin) {
$totalColumn: 16;
$totalMargin: ($margin*2)* $columns*1px;
$totalWidth: calc(100% - #{$totalMargin})/$totalColumn;
$columnWidth: $totalWidth*$columns;
width: $columnWidth;
margin-left: $margin;
margin-right: $margin;
float: left;}

.articleCard {
@include setColumnWidth(4, 16);
}

但是输出在这里

错误：未定义的操作：“calc(100% - 0px)/16 times 3”。
在 Mixin 中的 Users/mac/Documents/Projects/LeoX/New Version/HTML/scss/_myvalue.scss 的第 37 行setColumnWidth

标签： htmlcsssass

Answer 1

请使用以下内容进行计算，totalWidth因为问题是计算之外的 $totalColumn 并且还需要如下包装：

$totalWidth: calc((100% - #{$totalMargin}) / #{$totalColumn});