如何调试CSS calc（）值？

Question

我有相对复杂的公式，例如 transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))

如何调试计算值？此外，有没有一种方法可以验证/突出显示公式错误？

我试图这样输出到伪元素，但没有运气

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

我发现的唯一方法是将计算的一部分放到未使用的数值属性background-position-x上，例如在下面的gif上，这样它将在计算选项卡上显示计算值-有用但不是很方便（background-position-x在页面滚动时注意更改）：

    position: fixed;
    display: block;
    left:0;
    right: 0;
    background: yellow;
    padding: 5px;
    z-index: 100;
    content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));

var sc = ScrollOut({
    cssProps: true
  })
  const results = Splitting();

  var parallaxedElements = document.querySelectorAll('.section');

  document.addEventListener('scroll', function(e) {
    parallaxedElements
    Array.from(parallaxedElements).forEach((el) => {
      var bcr = el.getBoundingClientRect();
      if (bcr.y < 0 && Math.abs(bcr.y) <= bcr.height) {
        el.style.setProperty("--scrolled-out-y", Math.round(Math.abs(bcr.y) * 10000 / bcr.height) / 10000);
      }
    });

  })

@import url("https://fonts.googleapis.com/css?family=Roboto");
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: "Roboto";
    font-size: 14px;
    line-height: 1.4;
    scroll-behavior: smooth;
  }
  
  .section {
    position: relative;
    background-attachment: fixed;
    z-index: 1;
    --image-scale: 1.2;
    --scrolled-out-y: 0;
  }
  
  .section__background {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .section__background:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    background: linear-gradient(to bottom, black, 100% white);
    background: rgba(0, 0, 0, 0.4);
    opacity: calc(1 + ((var(--viewport-y) * 1.5)));
  }
  
  .section__background>img {
    height: 150vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0px;
    user-select: none;
    transform: scale(var(--image-scale)) translateY(calc((-1px * var(--element-height) * (var(--image-scale) - 1)) * var(--scrolled-out-y)));
  }
  /* .indicator:after {
        position: fixed;
        display: block;
        left: 0;
        right: 0;
        background: pink;
        padding: 5px;
        z-index: 100;
        content: calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y));
    } */
  
  .section__container {
    padding-bottom: 50vh;
    overflow: hidden;
    align-items: flex-start;
    position: relative;
    z-index: 4;
  }
  
  .section__heading {
    color: #fff;
    text-transform: uppercase;
    font-size: 45px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 8px;
    margin: 0;
    overflow: hidden;
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
  
  .section__heading:after {
    content: "";
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateX(calc(var(--scrolled-out-y) * 100% - 70%));
    background: #b38c6b;
  }
  
  .section__content {
    display: flex;
    color: white;
    flex-direction: column;
  }
  
  .section__content p+p {
    margin-top: 20px;
  }
  
  .splitting {
    --char-percent: calc(var(--char-index) / var(--char-total));
  }
  
  .splitting .char {
    display: inline-block;
    opacity: calc(1 + ((var(--viewport-y) * 1.5) - var(--char-percent)));
  }

Answer 1

有没有办法验证/突出显示公式错误？

您需要检查定义公式时是否违反任何规则。这是来自规范：

在每个运算符中，都会检查左右参数的类型是否有这些限制。如果兼容，则类型按如下所述解析（为简单起见，以下忽略运算符的优先级规则）：

• 在+或 处-，检查两侧是否具有相同的类型，或者一侧是 a<number>而另一侧是 an <integer>。如果双方类型相同，则解析为该类型。如果一侧是 a <number>，另一侧是 a <integer>，则解决<number>。
• 在*，检查至少一侧是<number>。如果双方都这样<integer>，就下定决心<integer>。否则，解析为对方的类型。
• 在/，检查右侧是否为<number>。如果是左侧<integer>，则解决<number>。否则，解析为左侧的类型。

如果运算符未通过上述检查，则表达式无效

一开始听起来可能有点复杂，但规则很简单，我们可以用简单的单词将它们重写如下：

• 您不能添加/减去两种不同的类型（5px + 5s没有意义）。
• 您只能与数字相乘（5px * 5px没有意义且不等于25px）。
• 您只能除以非0（5px / 5px没有意义且不等于1或1px）的数字。

如果您没有违反任何这些规则，那么您的公式就是正确的。我们不要忘记另一个重要的语法规则：

此外，+ 和 - 运算符两侧都需要有空格。（* 和 / 运算符可以在周围没有空格的情况下使用。）

考虑到这一点，您只需要确定您的 CSS 变量是数字/整数还是用类型（长度、频率、角度或时间）定义的。如果它未定义或包含字符串值，则该值calc()将无效。

检查规范以获取更多详细信息和更准确的解释：https://drafts.c​​sswg.org/css-values-3/#calc-type-checking

如何调试计算值？

要检查计算值，我认为没有办法，因为 的计算值calc()可能会有所不同，具体取决于您使用它的位置（哪个属性）。换句话说，最终值只有在属性中使用后才存在。

我们可能认为有些公式很简单，就像calc(5px + 5px)总是可以计算到一样10px，但其他公式会更困难。就像根据属性不同，calc(5px + 50%)哪里会有不同的行为。%考虑到这一点，浏览器永远不会计算该值，直到在属性中使用该值。

即使使用JS你也无法得到你想要调试的最终值；您只能获得属性的计算值：

var elem = document.querySelector(".box");
var prop = window.getComputedStyle(elem,null).getPropertyValue("--variable");
var height = window.getComputedStyle(elem,null).getPropertyValue("height");
console.log(prop);
console.log(height);

.box {
  --variable: calc(5px + 5px);
  height:var(--variable);
}

<div class="box"></div>