为什么我的 scss 变量没有按预期解析？ [复制]

Question

这是我想要得到的输出：

---

这里是代码：https://jsfiddle.net/t5ewp8ax/

// html
<p class="movie-category">
  <span>Sentimental</span>
  <span>Romantic</span>
  <span>Dramedy</span>
</p>

// scss
.movie-category {
  font-size: 3em;
  display: inline-flex;
  justify-content: space-between;
  background: blue;

  > span:not(:last-child) {
    $distance: 1em;
    $half-distance: $distance / 2;
    margin: 0 $distance 0 0;

    position: relative;
  }
  > span:not(:last-child)::after {
    $size: .2em;
    $half-size: $size / 2;

    content: '';
    position: absolute;
    top: calc(50% - $half-size);
    left: calc(100% + $half-distance - $half-size);

    display: block;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: red;
  }
}

似乎是这样的：

  > span:not(:last-child) {
    $distance: 1em;
    margin: 0 $distance 0 0;
  }

被正确解析为margin: 0 1em 0 0;。但是

  > span:not(:last-child)::after {
    left: calc(100% + $half-distance - $half-size);
  }

没有被解析为left: calc(100% + .5em - .1em);。为什么？我做错了什么？

---

顺便说一句，如果有更简洁的代码可以提供该输出，我们将非常欢迎

Answer 1

那是因为在

中使用了$half-distance

left: calc(100% + $half-distance - $half-size); 在 ::after 块内不可用。 对于像 calc() 这样的特殊函数，sass 变量应该包含在 #{...} 中 要解决上述问题，您可能可以使用，

span:not(:last-child) {
    $distance: 1em;
    $half-distance: $distance / 2;
    ...,

   &::after {
    $size: .2em;
    $half-size: $size / 2;
    left: calc(100% + #{$half-distance - $half-size});
   }
}

Answer 2

您使用position: absolute 和display: block 作为伪元素有什么特别的原因吗？将它们设置为 position: relative 和 display: inline-block 应该有助于使它们的定位更加灵活。