calc css top in sass with css attr() function

Question

I am trying to do something like in in 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;
    }

I tried this too:

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

but nothing is working. is there a way to calculate top with css attr() function in sass?

with sass interpolation i get this `calc( 30px + 15px + attr(data-speciality-widget-height, px))` — Sushmit Sagar, Oct 22 '21 at 14:44
and this with second approach `45pxattr(data-speciality-widget-height)` as output — Sushmit Sagar, Oct 22 '21 at 14:45
ah I see, sadly that's invalid css. You can't use attr funcion inside calc currently. it might be a thing in CSS4 — Apolo, Oct 22 '21 at 14:45

score 0 · Answer 1 · answered Oct 22 '21 at 14:47

so issue you have is that attr(...) inside calc is invalid CSS (might change later on in CSS4 as per this SO answer)

A workaround would be to change your html to replace your data attribute with an inline css variable like this:

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

and use it like this:

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

calc css top in sass with css attr() function

1 Answers1