Sitemap / Advertise

Information



Tags



Share

How to use the calc() function in CSS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement




Definition

In this article, I will show you how to calculate and evaluate variables in CSS without requiring a preprocessor such as SASS.

Syntax:(*)

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a , , ,

The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules:

+ Addition

- Subtraction

* Multiplication

/ Division

The operands in the expression may be any syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Code


--------------CSS(plain)---------------
.calc{display:block;background-color:white;width:calc(80% - 158px);height:calc((250px / 3) - (12px * 2));margin:auto;}

--------------HTML----------------
<div class="calc"></div>

Result:

References

(*) https://developer.mozilla.org/en-US/docs/Web/CSS/calc