I'm trying to center element using calc() inside of max(), but it works only in CSS. SCSS returns error:
Error: "calc(50% - var(--def-width)/2 - 0.5em - 1px)" is not a number for `max'
on line 7:9 of stdin, in function `max`
from line 7:9 of stdin
>> left: max(calc(50% - var(--def-width)/2 - 0.5em - 1px), 0px);
--------^
.alert {
--def-width: 720px;
position: fixed;
width: 100%;
max-width: var(--def-width);
bottom: 0;
left: max(calc(50% - var(--def-width)/2 - 0.5em - 1px), 0px);
padding: 0.5em;
margin-bottom: 1em;
box-sizing: border-box;
}
.alert.red {
background: linear-gradient(#d97272, #b65b5b);
color: #fff;
border: 1px solid #ae6565;
}
<div class="alert red">
<span>Some text</span>
</div>
I know I can it using @media, but it looks so strange that I can't use calc() as a number in max().