Calc

calc() - это функция CSS, которая даёт возможность расcчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы length, frequency, angle, time, number, или integer.

Поддерживается только 4-ре арифметических действия: *, /, + и -

Обязательно указать размерность

.wrapper {
    min-width: 360px;
    max-width: 1200px;
    width: 90%;
}
aside {
    margin-right: 20px;
    width: 160px;
}
main {
    width: calc(100% - 160px - 20px);
}
            

Var

Функция var () CSS может использоваться для вставки значения свойства (иногда называемого «переменной CSS») вместо любой части значения другого свойства.

--fz
--main-color
                

Значение переменной после двоеточия

--fz: 24px;
--main-color: #080;
                

Присвоение значения переменной через вызов var

font-size: var(--fz);
background-color: var(--main-color);
font-size: 24px;
background-color: #080;
                    

font-size: var(--fz, 24px);
font-size: 24px;
                    

Область видимости локальная: внутри определенного селектора

button {
    --size: 50px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
}
width: 50px;
height: 50px;
                    

:root {
    --size: 50px;
}
button {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
}
width: 50px;
height: 50px;