Calculating the difference between percent and px is not as simple as 50% – 30px. Obviously you’ll be getting incompatible unit error. This is because SASS cannot perform arithmetic operations on values that cannot be converted from one unit to another. SASS does not know exactly how wide a “percentage (%)” is in terms of pixels or any other unit. Only the browser is capable of knowing such things.

So here comes the need of **calc()** function.

**About calc():** The calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element’s width, we can use calc() to specify that the width is the result of the addition of two or more numeric values.

**Example:**`.class{`

`height`

`: calc(`

`30px`

`+`

`50px`

`);`

`}`

*chevron_right**filter_none***Complied file:**.class { height: calc(30px + 50px); }

**Example:**`.class {`

`width`

`: calc(`

`50%`

`+`

`30px`

`);`

`}`

*chevron_right**filter_none***Complied file:**.class { width: calc(50% + 30px); }

**Example:**`.class {`

`height`

`: calc(`

`50%`

`-`

`20px`

`);`

`}`

*chevron_right**filter_none***Complied file:**.class { height: calc(50% - 20px); }

**Example:**`$x: 50%;`

`$y: 20px;`

`.class {`

`width: calc(#{$x} - #{$y});`

`}`

*chevron_right**filter_none***Complied file:**.class { height: calc(50% - 20px); }

**But why do we need this here ?**

The **calc() function** provides a better solution for the following reason. We can combine different units. Specifically, we can mix relative units such as percentages and viewport units, with absolute units such as pixels. For example, we can create an expression that will subtract a pixel value from a percentage value.

Let’s come to our case now that is subtracting px from %. Using the **calc()** function in our SCSS code we can literally do the subtraction of two different units easily.

Sometimes if your values are in variables, you may need to use interpolation to turn them into strings.

**Note:** The **calc() function** can be used to perform addition, subtraction, multiplication, and division calculations with numeric property values. Specifically, it can be used with length, frequency, angle, time, number, or integer data types.

**example:**

`.class { ` ` ` `width` `: calc(` `50` `vmax + ` `3` `rem); ` ` ` `padding` `: calc(` `1` `vw + ` `1em` `); ` ` ` `transform: rotate( calc(` `1` `turn + ` `28` `deg)); ` ` ` `background` `: hsl(` `100` `, calc(` `3` `* ` `20%` `), ` `40%` `); ` ` ` `font-size` `: calc(` `50` `vw / ` `3` `); ` `} ` |

*chevron_right*

*filter_none*

**Complied file:**

.class { width: calc(50vmax + 3rem); padding: calc(1vw + 1em); transform: rotate(calc(1turn + 28deg)); background: hsl(100, calc(3 * 20%), 40%); font-size: calc(50vw / 3); }

## Recommended Posts:

- Sass sass:list Module
- Sass sass:color Module
- Sass | sass:map module
- SASS sass:string Module
- Kotlin | Plus and minus Operators
- How to create optional arguments for a SASS mixin?
- Sass @function Rule
- CSS Preprocessor | SASS
- SASS | Comments
- SASS | Variables
- SASS | @import
- SASS | Nesting
- SASS | Interpolation
- SASS | Placeholder Selectors
- SASS | Parent Selector
- SASS | @mixin and @include
- SASS | @if and @else
- SASS | Booleans and Boolean operators
- SASS | Shadowing and Flow Control
- Last-child and last-of-type selector in SASS

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.