Question

我有这个混音：

@mixin mobile {
  @media (max-width: 576px) {
    @content;
  }
}

我试图做以下事情：

height: calc($image_height - $spacing_between_items);

但是这些变量没有得到评估。我想这可能是因为@content的工作原理，但我不是SASS专家。

为什么会发生这种情况，我该如何解决？

Answer 1

这不是@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});
  }
}

在SASS中的@include块中使用变量

1 个答案: