CSS функция calc( )

Функция calc() - это функция, которая позволяет рассчитать значения CSS-свойства путем простых вычислений, используя операторы "+, -, *, /", для указания порядка вычисления используются скобки, если необходимо, а математические операторы принято отделять пробелами.

Функция calc() должна использоваться только для работы с числами (можно с единицами измерения, можно и без). В качестве единиц измерения применимы: px, %, rem, em, vh, vw, vmin, vmax и всякие дюймы, см и тд. Очень крутая особенность - это возможность использования всех этих разных единиц измерения в одном выражении (будут примеры ниже). Чаще всего calc применяются для указания размеров шрифта, длины и высоты элемента, отступов, бордеров и тд. Примеры с единицами измерений:

.block {
    font-size: calc(16px); 
    padding: 15px calc(5em * 2);
    width: calc(100% / 5);
    transform: rotate(calc(90deg / 2));
}

Примеры использования без единиц измерений:

.block2 {
    line-heigth: calc(1 * 0.5);
    flex-grow: calc(4);  
}

Примеры использования с единицами измерений:

.block3 {
    width: calc(100vw - 50px);
    animation-duration: calc(1s + 50ms); 
}

При вычислении свойств, которые должны иметь единицы измерения, важно помнить про следующие правила:

  1. При + и - все числа должны иметь ед. измерения.
  2. При * и / одно из чисел не должно иметь ед. измерения.

Примеры: 

.block4 {
    width: calc(250px - 50px);
    width: calc(250px / 5);
}

Можно даже использовать пользовательские CSS переменные:

.block5 {
    --min-width: 50px;
    width: calc(var(--min-width) + 20px);
}

Адаптивные свойства

Очень удобно использовать данную функцию для создания адаптивного CSS свойства при изменении ширины страницы. К примеру для размера шрифта, паддинга или нижнего отступа элементов:

.block6 {
    padding: calc(15px + (35 - 15) * ((100vw - 320px) / (1200 - 320)));

    css-rule: calc(minSize(px) + (maxSz - minSz) * ((100vw - minW) / (maxW - minW)));
}

где:

  1. minSz - минимальный размер для мобилок
  2. maxSz - максимальных размер по desktop-макету
  3. minW - минимальная ширина макета для мобилок (обычно 320px)
  4. maxW - ширина полотна макета (обычно ширина PSD макета или блока .container ~ 1200px)

Функция calc() MDN -> developer.mozilla.org

#css
openImgPic