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

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

没有被解析为↓： calc（100%.5em-.1em）；。为什么啊？我做错了什么？

顺便说一句，如果有更干净的代码可以提供，输出是非常受欢迎的




Answer 1

对于伪元素使用position:absolute和display:block是否有特殊原因？将它们设置为position:relative和display:inline block应有助于使它们的定位更加灵活。

Answer 2

那是因为我们在比赛中使用了一半的距离

左：计算（100%$一半距离-$一半大小）；在：：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});
   }
}