Sass Adaptable successful CSS calc() relation

Sass Adaptable successful CSS calc() relation

I'm making an attempt to usage the calc() relation successful a Sass stylesheet, however I'm having any points. Present's my codification:

$body_padding: 50pxbody padding-top: $body_padding height: calc(100% - $body_padding)

If I usage the literal 50px alternatively of my body_padding adaptable, I acquire precisely what I privation. Nevertheless, once I control to the adaptable, this is the output:

body { padding-top: 50px; height: calc(100% - $body_padding);}

However tin I acquire Sass to acknowledge that it wants to regenerate the adaptable inside the calc relation?


Interpolate:

body height: calc(100% - #{$body_padding})

For this lawsuit, borderline-container would besides suffice:

body box-sizing: border-box height: 100% padding-top: $body_padding

To usage $variables successful calc() for immoderate SCSS place:

HTML:

<div></div>

SCSS:

$a: 4em;div { height: calc(#{$a} + 7px); background: #e53b2c;}

Mistake producing weblog contented

CSS Position - #css #frontend #webdevelopment

CSS Position - #css #frontend #webdevelopment from Youtube.com

Previous Post Next Post

Formulario de contacto