calc() 是一個 CSS 的函數，功能如 function 字面上的意思，在設定屬性的時候可以進行四則運算，不多說直接看各種 use case。

length

background-image: url(bottomRightCorner.png);
background-position: calc(100% - 50px) calc(100% - 20px);

max-height: calc(70vh - 57px - 42px);

percentage

.column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

angle

transform: rotate(calc(0.5turn + 45deg));

time

transition: calc(1s - 120ms);

參考資料

calc()
A Couple of Use Cases for Calc()
A Complete Guide to calc() in CSS