Using calc inside max in SCSS

Viewed 125

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);
   --------^

JSFiddle example

.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().

0 Answers
Related