CODEWITHSUNDEEP
csssass
KShewengger
KShewengger

Reputation: 8269

Perform Math addition between CSS Variable and SCSS Variable

How to perform addition between CSS variable and SCSS variable?

For example, I have these values:

--header-size: 10rem

$bar-size: 20rem

where if combined, the total would be:

.gap {
  top: var(--header-size) + $bar-size;       // to be, if possible, 30rem;
}

Is this possible? If not, is there a way I can perform addition between them?

Though I do understand that it can be accomplished if both of them are of scss variables but in the current project, there's this scenario where only the css variable is being changed when met with specific breakpoints.

Any help is welcome. Thank you very much

Upvotes: 1

Views: 1737

Answers (1)

Arkellys
Arkellys

Reputation: 7790

You can use CSS calc() and SASS interpolation:

calc(var(--header-size) + #{$bar-size});

Upvotes: 3

Related Questions