如何在Sass中使用CSS attr()函数计算top属性值

你的两种写法失效由两层原因导致：

1. 执行时机不匹配：Sass是预编译工具，所有Sass变量、Sass侧的运算都会在编译为CSS的阶段完成，而attr()是CSS原生的运行时函数，只有浏览器加载页面、读取DOM元素属性时才会拿到对应值，不可能在Sass编译阶段参与计算。
2. attr()能力限制：目前所有主流浏览器仅支持attr()在CSS content属性中返回字符串值，尚不支持返回数值/长度类型参与运算的特性，即使语法正确浏览器也无法识别。

可行实现方案 #

改用CSS自定义属性替代data属性存储动态高度值即可实现需求，操作如下：

• 调整DOM属性写法，用行内CSS变量替代data属性：
  原写法：<div data-speciality-widget-height="200px"></div>
  调整后：<div style="--speciality-widget-height: 200px"></div>
• 调整Sass代码：

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

原写法的具体问题 #

• 第一种写法：attr()返回值为字符串，无法和长度值做加法运算，浏览器会直接判定该属性值非法失效。
• 第二种写法：Sass编译阶段会尝试对三个值做加法运算，attr(data-speciality-widget-height)在Sass侧只是普通字符串，无法和数值变量相加，编译阶段就会直接报错，无法生成可用的CSS代码。

内容的提问来源于stack exchange，提问作者Sushmit Sagar