DEV Community

Discussion on: Scss variables

Collapse
 
tmwlsh profile image
Tom Walsh • Edited

Hey Pauline!! A good example of using the calc value is;
Pretend that you have 2 blocks in a row, and you want them both to be 50%, but you want a 20px gap in between. You could use the calc function as follows:

.block {
    width: calc(50% - 20px / 2);
}

This means that each block with the class .block will be 50% of the container, minus (20px / 2). Therefore each .block will be 50% - 10px. Hope that makes sense!

Collapse
 
ducospauline profile image
Pauline

Hi Tom,

Thanks for your answer, it helps a lot :)!!!