calc() - Функция калькулятора
CSS-функция calc () позволяет выполнять вычисления при указании значений свойств CSS. Его можно использовать везде, где допустимы <длина>, <частота>, <угол>, <время>, <процент>, <число> или <целое число>.
Выражение может быть любым простым выражением, объединяющим следующие операторы с использованием стандартных правил
приоритета операторов:
+ Плюсовать.
- Вычитать
* Умножать
/ Делить.
! Один из аргументов и крайний правый долженбыть <числом>.
Можно использовать скобки, чтобы установить порядок вычислений, когда это необходимо.
Простое использования функции Калькулятора:
<style>
width: calc( 50% - 25px );
width: calc(100% - 200px - 15px);
</style>
Использование переменных в calc() калькуляторе:
<style>
$img_height: 225px;
$img_width: 200px;
$img_padding: 15px;
background-position:
calc(100vw - #{$img_width} - #{$img_padding})
calc(100vh - #{$img_height} - #{$img_padding});
background-repeat: no-repeat;
margin: 0;
}
</style>
Пример calc() для создания сетки:
Chrome | Edge | Firefox | Internet | Opera | Safari |
26 | Yes | 16 | 9 | 15 | 7 |
Android | Chrome | Edge | Firefox | Opera | Safari | Samsung |
? | 28 | Yes | 16 | 21 | 7 | Yes |