我有这个混音:
@mixin mobile {
@media (max-width: 576px) {
@content;
}
}
我试图做以下事情:
height: calc($image_height - $spacing_between_items);
但是这些变量没有得到评估。我想这可能是因为@content
的工作原理,但我不是SASS专家。
为什么会发生这种情况,我该如何解决?
答案 0 :(得分:3)
这不是@content
的工作方式,而是calc()
的工作方式。您必须interpolate calc()
函数中的{{3}}变量:
$image_height: 100%;
$spacing_between_items: 10px;
@include mobile {
.class {
height: calc(#{$image_height} - #{$spacing_between_items}});
}
}
输出:
@media (max-width: 576px) {
.class {
height: calc(100% - 10px});
}
}