Sass calcular porcentaje menos px

Quiero poder hacer lo siguiente:

height: 25% - 5px;

Obviamente cuando hago eso me sale el error:

Incompatible units: 'px' and '%'.

Sass no puede realizar operaciones aritméticas en valores que no se pueden convertir de una unidad a la siguiente. Sass no tiene forma de saber exactamente qué tan ancho es el "100%" en términos de píxeles o cualquier otra unidad. Eso es algo que solo el navegador sabe.

Necesitas usar calc()en su lugar. Verifique la compatibilidad del navegador en ¿Puedo usar ...

.foo {
    height: calc(25% - 5px);
}

Si sus valores están en variables, es posible que necesite usar la interpolación para convertirlos en cadenas (de lo contrario, Sass solo intenta realizar la aritmética):

$a: 25%;
$b: 5px;

.foo {
  width: calc(#{$a} - #{$b});
}

Hay una calcfunción tanto en SCSS [tiempo de compilación] como en CSS [tiempo de ejecución]. Probablemente estés invocando lo primero en lugar de lo segundo.

Por razones obvias, las unidades de mezcla no funcionarán en tiempo de compilación, pero sí en tiempo de ejecución.

Puede forzar este último mediante el uso de unquoteuna función SCSS.

.selector { height: unquote("-webkit-calc(100% - 40px)"); }

$var:25%;
$foo:5px;
.selector {
    height:unquote("calc( #{$var} - #{$foo} )");
}

SI conoce el ancho del contenedor, puede hacer lo siguiente:

#container
  width: #{200}px
  #element
    width: #{(0.25 * 200) - 5}px

Soy consciente de que en muchos casos #container podría tener un ancho relativo. Entonces esto no funcionaría.

Perdón por revivir el viejo hilo: la extensión de Compass con un: después de que el pseudo-selector podría adaptarse a su propósito, por ejemplo. si desea que un div llene el ancho desde la izquierda hasta (50% + 10px) de la pantalla, puede usar (en sintaxis con sangría SASS):

.example
    background: red
    +stretch(0, -10px, 0, 0)
    &:after
        +stretch(0, 0, 0, 50%)
        content: ' '
        background: blue

El elemento: after se llena un 50% a la derecha de .example (dejando un 50% disponible para el ancho de .example), luego .example se estira a ese ancho más 10px.

Simplemente agregue el valor de porcentaje en una variable y use, #{$variable} por ejemplo,

$twentyFivePercent:25%;
.selector {
    height: calc(#{$twentyFivePercent} - 5px);
}