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

Posted 2023-03-06

【中文标题】为啥我的 scss 变量没有按预期解析？ [复制]

【英文标题】：Why my scss variable wasn't parsed as expected? [duplicate]为什么我的 scss 变量没有按预期解析？ [复制]

【发布时间】：2020-04-07 21:03:45

【问题描述】：

这是我想要得到的输出：

---

这里是代码：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);。为什么？我做错了什么？

---

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

【参考方案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);
   

【讨论】：

jsfiddle.net/Lgq4ehyb 还是不行，伙计，我尝试了很多调整。

抱歉，您应该将 sass 变量包装在 # 中以用于特殊功能。

例如right: calc(#$osize - $fsize);

是的，它确实通过将 sass 变量放在 interpolation 中来解决问题，就像文章 here 中描述的那样。无论如何，谢谢您，有什么建议可以让代码更清晰以获得相同的输出？如果不是，我可能会让你的答案成为公认的答案。

【参考方案2】：

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

【讨论】：

不错的提示！没有calc()，只要容器有足够的空间放在一行中（在我的情况下应该总是这样做），它就可以很好地工作。这是应用提示后的代码：jsfiddle.net/k4ravhse。但是如果由于某种原因，我必须强制元素在一行中，答案应该是使用带有插值修复的旧方法。 jsfiddle.net/07cbkuns