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(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg));
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 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);
}