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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .class{
        height: calc(30px + 50px);

    chevron_right

    
    

    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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.