为什么我的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

  左

：calc（100％+ $ half-distance-$ half-size）;   在 :: after 块中不可用。   和sass变量应包装在＃{...}中，以实现calc（）之类的特殊功能   要解决上述问题，您可能可以使用

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应该有助于使它们的定位更加灵活。