¿Cómo calcular el porcentaje menos px en SASS?

Calcular la diferencia entre porcentaje y px no es tan simple como 50% – 30px. Obviamente obtendrá un error de unidad incompatible. Esto se debe a que SASS no puede realizar operaciones aritméticas en valores que no se pueden convertir de una unidad a otra. SASS no sabe exactamente qué tan amplio es un «porcentaje (%)» en términos de píxeles o cualquier otra unidad. Solo el navegador es capaz de saber tales cosas.

Así que aquí viene la necesidad de la función calc() .

Acerca de calc(): La función calc() nos permite realizar operaciones matemáticas sobre los valores de las propiedades. En lugar de declarar, por ejemplo, valores de píxeles estáticos para el ancho de un elemento, podemos usar calc() para especificar que el ancho es el resultado de la suma de dos o más valores numéricos.

• Ejemplo:

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

  archivo completo:

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

Pero, ¿por qué necesitamos esto aquí?
La función calc() proporciona una mejor solución por la siguiente razón. Podemos combinar diferentes unidades. Específicamente, podemos mezclar unidades relativas, como porcentajes y unidades de ventana gráfica, con unidades absolutas, como píxeles. Por ejemplo, podemos crear una expresión que reste un valor de píxel de un valor porcentual.

• Ejemplo:

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

  archivo completo:

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

Vayamos a nuestro caso ahora que es restar px de %. Usando la función calc() en nuestro código SCSS podemos literalmente hacer la resta de dos unidades diferentes fácilmente.

• Ejemplo:

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

  archivo completo:

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

A veces, si sus valores están en variables, es posible que deba usar la interpolación para convertirlos en strings.

• Ejemplo:

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

  archivo completo:

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

Nota: La función calc() se puede utilizar para realizar cálculos de suma, resta, multiplicación y división con valores de propiedad numéricos. Específicamente, se puede usar con tipos de datos de longitud, frecuencia, ángulo, tiempo, número o entero.

ejemplo:

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

archivo completo:

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