To perform calculations when specifying a CSS property calc() function can be used. This function takes single expression as
parameter. When writing this expression some rules must be respected:
- no empty
calc()
- there should be an operator between the arguments
- there should not be any division by zero
Otherwise calc() function will be invalid and the entire rule using it will be ignored.
Noncompliant code example
.btn {
border: solid black 1px;
width: calc(100% 80px); /* Noncompliant */
}
Compliant solution
.btn {
border: solid black 1px;
width: calc(100% - 80px);
}
