如何将 css calc() 的值分配给 css 变量，并且不会延迟计算，直到使用 css 变量

2024-05-18 • 问答

我无法从我能找到的任何解释中确定关于何时设置 css 变量的值。所以我进行了测试

html

    <div class="flex">
      <div class="item1">
        <div class="included"></div>
      </div>
      <div class="item2">
        <div class="included"></div>
      </div>
    </div>

css

        :host {
          display: grid;
          place-content: center;
          
        }

        .flex {
          display: flex;
          flex-direction: column;
          width:800px;
          height: 300px;
          background-color: blue;
          --div-width: calc(100% - 10px);
        }
        .item1,.item2 {
          background-color: green;
          height: 100px;
        }
        .item1 {
          width: 80%;
        }
        .item2 {
          width: 40%;
        }
        .included {
          width: var(--div-width);
          background-color:yellow;
          height:50px;
        }

注意我在自定义元素中进行了测试，因此 :host 描述符，但这并不重要。

重要的是我在 800 像素宽的 div 中将 --div-width 设置为 calc(100% - 10px) - 所以期望它具有 790 像素的值。

然而，从这个截图

很明显，计算被延迟到使用变量的地方。因为黄色框距离周围元素仅 10 像素。

有没有办法告诉 css 将属性的值设置为声明它的元素，而不是使用它的地方。

我确实尝试代理变量 - 就像这样......

          --proxy-width: calc(100% - 10px);
          --div-width: var(--proxy-width);

但没有区别。

PS 这是一个简单的例子，我实际上想如何使用它来控制自定义元素内项目（文本区域）的宽度，取决于上下文，因此我可以使元素响应一些外部容器的宽度。

如果我理解正确，您想让元素响应相对于父容器的大小变化。我这样做的方式（但相对于视口）是使用 relative length units 之类的 vmin 以及 calc() 和 CSS 变量。通过这种方式，我们可以创建一个“响应单元”，无论它是相对于初始包含块还是其他一些定位祖先。

下面的示例显示了一个带有嵌套 <div> 的 <textarea>，它由响应单元提供支持。由于此 width 和 height 计算是相对于视口完成的，即使 <textarea> 是 div 的子项。您可以将 vmin 交换为相对长度单位，该单位不是相对于视口，而是相对于某个祖先（如自定义元素）。

.wrapper {
 border: 1px solid;
 padding: 1rem;
}

textarea {
  --w: 150;
  --h: 80;
  width: 200px; /* fallback width */
  height: 200px; /* fallback height */
  width: calc(var(--w) * 1vmin);
  height: calc(var(--h) * 1vmin);
  max-width: 100%;
  /* extra styles for demo */
  border: 1px solid red;
  margin: 0 auto;
}

<div class="wrapper">
  <textarea id="demo" name="demo"
            rows="5" cols="30">It was a dark and stormy night...
  </textarea>
</div>

我找到了一个“完美”的解决方法！

对此的解决方案是使用 'resize' 事件读取您想要使用 getBoundingClientRect(); 时使用 100% 的元素的大小，并使用返回的宽度将“calc”设置为宽度 px - 无论如何

因此对于问题中的示例，我将使用此代码

_resize() {
    if (this.resizeInProgress) return;
    this.resizeInProgress = true;
    requestAnimationFrame(() => {
        const container = this.shadowRoot.querySelector('.flex');
        const bound = container.getBoundingClientRect();
        container.style.setProperty('--div-width',`calc(${bound.width}px - 10px)`);
        this.resizeInProgress = false;
    });
  }

我在自定义元素构造函数中将该函数绑定到 this

this.resizeInProgress = true;
this._resize = this._resize.bind(this);

这在 connectedCallback do

window.addEventListener('resize',this._resize);
this.resizeInProgress = false;

并在我的 disconnectedCallback 中再次删除它

this.resizeInProgress = true;
window.removeEventListener('resize',this._resize);

我保留了 calc() 函数，因为在我的现实生活中，减去的数量是以“em”为单位的

如何将 css calc() 的值分配给 css 变量，并且不会延迟计算，直到使用 css 变量

xihaibo 回答：如何将 css calc() 的值分配给 css 变量，并且不会延迟计算，直到使用 css 变量

大家都在问