Что значит этот код Width: calc(~"100% — 80px") [ОТВЕЧЕНО]?

Question

[Alibek Kulseitov]

Что значит этот код Width: calc(~"100% - 80px") ?

Answer 1

[Мак Алексей]

Этот код для расчёта ширины в LESS:
Width - оператор CSS задающий ширину (чего бы то ни было)
calc() - математическая функция ( ArturArturov дал ссылки)
~"..." - способ записи с Тильдой(~) для того чтобы LESS не преобразовывал данную строку, иначе нужно включать Strict Math

lessc -sm=on
lessc --strict-math=on

100% - 80px - собственно само вычисление, обязательно экранировать операторы (-, +, /, *) пробелами
100% - берёт значение ширины от родительского элемента без учёта границ (border)
80px - логично, абсолютная величина

Comments

[Alibek Kulseitov]

То есть если блок был например 700px а для планшетов мы сделаем этот код то будет 620px? А разве нельзя написать сразу например 95% ? 95 - это я рандомно написал (примерно те самые 80px)

[Мак Алексей]

Но ведь есть разница между планшетами?
Например есть ширина экрана 700px, а есть 600px.
Вот 90% от 700px это - 630px, а 90% от 600px - 540px.

Теперь попробуйте сделать 2 столбца, один из которых всегда 80px.
Вам нужно будет как-то масштабировать один из столбцов так, чтобы всегда оставались эти 80px.
calc() просто решает эту задачу.

[Alibek Kulseitov]

Мак Алексей: хммм) А вот вы говорите про LESS то есть он для рассчета Lessa расчитан? А в простом css ничего не значит? Я с less не дружу просто. =)

[Мак Алексей]

calс() иногда очень помогает для расчёта полной ширины элементов.
Как я сказал, width: 20% это 20% ширины родителя без учёта border.
Если у элемента будет граница, то в ширину не впишутся 5 таких элементов.
Но если сделать ширину элемента width: calc(20% - 2px) - по одному пикселю на левую и правую границы, то всё получится.

[Мак Алексей]

Нет. оператор "~" для LESS, a calc работает и в CSS. Просто писать нужно будет так:
Width: calc(100% - 80px);(не забываем про пробелы)

[Мак Алексей]

Без оператора "~" в LESS с выключенным Strict Math получится абракадабра, вроде 20%.

[Мак Алексей]

Пользуйтесь caniuse.com
caniuse.com/#search=calc
Говорит, что Calc не поддерживается Opera Mini.

Answer 2

[Сергей Кузьмин]

Рассчитать ширину окна. 100% - 80px. Скорей всего с целью избежать разной ширины браузера при появлении скрола

Comments

[Сергей Кузьмин]

stackoverflow.com/questions/31345845/why-we-write-... похожий вопрос на SO

[Мак Алексей]

Суровый скролл в 80 пикселей.

[Сергей Кузьмин]

Мак Алексей: Это да. Что то я перегнул. 14-18px. Раз в 5 ошибся)

Answer 3

[ArturArturov]

tympanus.net/codrops/css_reference/calc
https://webref.ru/css/function/calc