使用 css attr() 函数计算 sass 中的 css 顶部答案

【问题标题】：calc css top in sass with css attr() function使用 css attr() 函数计算 sass 中的 css 顶部
【发布时间】：2021-12-09 04:56:38
【问题描述】：

我正在尝试在 sass 中做类似的事情：

provider-details {
        position: absolute;
        top: calc( #{$speciality-widget-top-offset} + #{$speciality-n-provider-details-gap} + #{attr(data-speciality-widget-height)});
        left: auto;
        right: $provider-details-right-offset;
        bottom: $providers-details-bottom-offset;
        max-height: 715px;
    }

我也试过这个：

top: $speciality-widget-top-offset + $speciality-n-provider-details-gap + attr(data-speciality-widget-height);

但没有任何效果。有没有办法用sass中的css attr()函数计算top？

【问题讨论】：

它有什么问题？
用 sass 插值我得到了这个calc( 30px + 15px + attr(data-speciality-widget-height, px))
这与第二种方法45pxattr(data-speciality-widget-height) 作为输出
啊，我明白了，很遗憾这是无效的 css。您目前不能在 calc 中使用 attr 函数。这可能是 CSS4 中的一个东西

标签： css sass

【解决方案1】：

所以你遇到的问题是 calc 中的 attr(...) 是无效的 CSS（稍后可能会根据 this SO answer 在 CSS4 中更改）

一种解决方法是更改您的 html 以使用内联 css 变量替换您的数据属性，如下所示：

<div style="--speciality-widget-height: 2">

并像这样使用它：

top: calc(#{$speciality-widget-top-offset} + #{$speciality-n-provider-details-gap} + var(--speciality-widget-height));

【讨论】：