How to calculate percent minus px in SASS ?

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``); ` `}  `

Complied file:

```.class {
height: calc(30px + 50px);
}```
• 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.

• Example:

 `.class { ` `    ``width``: calc(``50%` `+ ``30px``); ` `} `

Complied file:

```.class {
width: calc(50% + 30px);
}```
• 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.

• Example:

 `.class { ` `    ``height``: calc(``50%` `- ``20px``); ` `} `

Complied file:

```.class {
height: calc(50% - 20px);
}```
• Sometimes if your values are in variables, you may need to use interpolation to turn them into strings.

• Example:

 `\$x: 50%; ` `\$y: 20px; ` ` `  `.class { ` `  ``width: calc(#{\$x} - #{\$y}); ` `} `

Complied file:

```.class {
height: calc(50% - 20px);
}```

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``); ` `} `

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);
}```

My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.

Article Tags :

1

Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.