Variable SASS en la función CSS calc()

CSS es en sí mismo un buen lenguaje para el diseño web, pero las hojas de estilo son cada vez más complejas, más grandes e incluso más difíciles de mantener. Ahí es donde entra en acción un preprocesador como Sass y nos ayuda a usar funciones que ni siquiera existen en CSS.

La función calc() es una función que toma una sola expresión como parámetro y toma el valor de la expresión como resultado. La expresión puede ser cualquier expresión simple que incluya los operadores aritméticos básicos como suma, resta, multiplicación y división.

El único lugar donde podemos usar la función calc() es en valores y también para una parte de alguna propiedad.
La función CSS calc() nos permite realizar cálculos mientras especificamos los valores de propiedad CSS como <longitud>, <frecuencia>, <ángulo>, <tiempo>, <porcentaje>, <número> o <entero>.

La función calc() está definida en la especificación CSS ya que la expresión matemática de calc() entra en conflicto con la aritmética de Sass.

Acercarse:

Usando una variable de Sass dentro de la función calc(): Las variables en CSS tienen la capacidad de tener diferentes valores para diferentes elementos, pero las variables de Sass solo pueden tener un valor a la vez.
Las variables en Sass son imperativas, lo que significa que si usamos una variable y luego cambiamos su valor, el uso anterior seguirá siendo el mismo.
En Sass, el uso más común para las variables es colocar las variables directamente en las hojas de estilo de Sass, pero a veces hacer eso no es lo único que se requiere. Hay ciertas situaciones en las que es necesaria la sintaxis de interpolación dentro de las funciones CSS. Calc() no es compilado por Sass sino por el propio navegador, por lo que debe tener todos los valores escritos correctamente en la función.

La interpolación significa solo el reemplazo de un marcador de posición con su valor literal, por lo que en caso de procesar Sass a CSS, todas las referencias a variables probablemente estén configurando una interpolación.

Hay momentos en los que los procesadores Sass no realizarán la sustitución a menos que haya una interpolación explícitamente especificada usando la sintaxis #{} .  
La variable Sass en la función CSS calc() se define mediante el uso de un símbolo reservado ($).
Hay una implementación simple del uso de una variable Sass en la función CSS calc() que se muestra a continuación:

Ejemplo:

$a: 40%; 
$b: 10px; 
    
.class { 
  height: calc(#{$a} - #{$b}); 
}

Archivo compilado:

.class {
 height: calc(40% - 10px);
}