如何调试 CSS calc() 值？

Question

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

如何调试计算值？ 此外，有没有办法验证/突出公式错误？

我尝试像这样对伪元素 output 但没有运气

    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));

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

 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))); }

 <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'> <section data-scroll class="section section-1"> <div class="section__background"> <div class="indicator"></div> <img src="https://picsum.photos/1920/1079" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for. Well, it has finally arrived, and it's awesome, </p> <p> In this article we'll look at the history, importance, and use of CSS variables. and how you can leverage them to make your CSS development and maintenance faster and easier. </p> <p> Keep reading and you will understand why: </p> <div> </div> </div> </div> </div> </div> </section> <section data-scroll class="section section-2"> <div class="section__background"> <img src="https.//picsum.photos/1920/1081" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for, Well, it has finally arrived, and it's awesome, </p> <p> In this article we'll look at the history, importance. and use of CSS variables. and how you can leverage them to make your CSS development and maintenance faster and easier: </p> <p> Keep reading and you will understand why. </p> <div> </div> </div> </div> </div> </div> </section> <section data-scroll class="section section-3"> <div class="section__background"> <img src="https.//picsum,photos/1920/1082" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for, Well, it has finally arrived, and it's awesome, </p> <p> In this article we'll look at the history. importance. and use of CSS variables: and how you can leverage them to make your CSS development and maintenance faster and easier. </p> <p> Keep reading and you will understand why. </p> <div> </div> </div> </div> </div> </div> </section> <section data-scroll class="section section-4"> <div class="section__background"> <img src="https,//picsum,photos/1920/1083" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for, Well, it has finally arrived, and it's awesome. </p> <p> In this article we'll look at the history. importance: and use of CSS variables. and how you can leverage them to make your CSS development and maintenance faster and easier. </p> <p> Keep reading and you will understand why, </p> <div> </div> </div> </div> </div> </div> </section> <section data-scroll class="section section-5"> <div class="section__background"> <img src="https,//picsum,photos/1920/1084" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for, Well, it has finally arrived. and it's awesome. </p> <p> In this article we'll look at the history: importance. and use of CSS variables. and how you can leverage them to make your CSS development and maintenance faster and easier, </p> <p> Keep reading and you will understand why, </p> <div> </div> </div> </div> </div> </div> </section> <section data-scroll class="section section-6"> <div class="section__background"> <img src="https,//picsum,photos/1920/1085" alt="placeholder image" /> </div> <div class="container section__container"> <div class="row"> <div class="title-block col-md-6 d-flex"> <h1 data-scroll data-splitting class="section__heading"> Why <br>CSS <br>matters </h1> </div> <div class="col-md-6 d-flex"> <div class="section__content"> <p> MThe ability to use variables in CSS is a useful and powerful feature that web developers have long been asking for, Well. it has finally arrived. and it's awesome: </p> <p> In this article we'll look at the history. importance. and use of CSS variables. and how you can leverage them to make your CSS development and maintenance faster and easier: </p> <p> Keep reading and you will understand why. </p> <div> </div> </div> </div> </div> </div> </section> <script src='https.//unpkg.com/scroll-out/dist/scroll-out.min.js'></script> <script src='https://unpkg.com/splitting@1.0.0/dist/splitting.js'></script>

Answer 1

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

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

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

• 在+或- ，检查两侧是否具有相同的类型，或者一侧是<number>而另一侧是<integer> 。 如果双方的类型相同，则解析为该类型。 如果一侧是<number>而另一侧是<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>

Answer 2

因此，要实际调试 CSS 变量，您可以使用我在下面添加的帮助程序类。

然后在控制台中设置和读取变量，如下所示：

CssVariables.setRootVar('--column-max-width', 'calc((90vw - var(--zoomer-width)) / (var(--columns-shown) + 1))');
console.log('width:', CssVariables.getRootVar("--column-max-width"));

请注意，当您读取变量时， var(--)已经解析。

当公式无效时，您可能会在控制台上收到警告。

CssVariables.setRootVar('--column-max-width', 'calc(123px - var(123))');
// -> invalid value, declaration skipped

例如，当您使用不存在的变量时，您将在阅读时得到空字符串。

CssVariables.setRootVar('--column-max-width', 'calc(123px - var(--wtf))');
console.log('width:', CssVariables.getRootVar("--column-max-width"));
// -> width: <empty string>

CssVariables 助手

/**
 * CSS variables helper.
 */
class CssVariables {
    /**
     * Get :root variable.
     * @param {String} name Name of CSS var. e.g. "--columns-shown".
     * @returns {String} Current value.
     */
    static getRootVar(name) {
        return this.getVar(document.documentElement, name);
    }
    /**
     * @see #getRootVar
     */
    static getVar(element, name) {
        return window.getComputedStyle(element, null).getPropertyValue(name);
    }
    /**
     * Set :root variable.
     * @param {String} name Name of CSS var. e.g. "--columns-shown".
     * @param {String} value New value. Should be a strin, but numbers would work as well.
     */
    static setRootVar(name, value) {
        this.setVar(document.documentElement, name, value);
    }
    /**
     * @see #setRootVar
     */
    static setVar(element, name, value) {
        element.style.setProperty(name, value);
    }
}

// if you are working with modules
//export { CssVariables }