Sass calcular porcentagem menos px

Quero poder fazer o seguinte:

height: 25% - 5px;

Obviamente, quando faço isso, recebo o erro:

Incompatible units: 'px' and '%'.

O Sass não pode executar aritmética em valores que não podem ser convertidos de uma unidade para a seguinte. Sass não tem como saber exatamente o quão grande é "100%" em termos de pixels ou qualquer outra unidade. Isso é algo que apenas o navegador sabe.

Você precisa usar em seu calc()lugar. Verifique a compatibilidade do navegador em Posso usar ...

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

Se seus valores estão em variáveis, pode ser necessário usar a interpolação para transformá-los em strings (caso contrário, o Sass apenas tenta executar aritmética):

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

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

Há uma calcfunção no SCSS [tempo de compilação] e CSS [tempo de execução]. Você provavelmente está invocando o primeiro em vez do último.

Por razões óbvias, as unidades de mixagem não funcionam em tempo de compilação, mas em tempo de execução.

Você pode forçar o último usando unquote, uma função SCSS.

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

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

Se você souber a largura do contêiner, poderá fazer o seguinte:

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

Estou ciente de que, em muitos casos, o #container pode ter uma largura relativa. Então isso não funcionaria.

Desculpe por reviver o thread antigo - o alongamento da bússola com um pseudo-seletor: after pode atender ao seu objetivo - por exemplo. se você deseja que uma div preencha a largura da esquerda para (50% + 10px) da tela, você pode usar (na sintaxe recuada do SASS):

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

O elemento: after preenche 50% à direita do .example (deixando 50% disponível para a largura do .example) e, em seguida, o .example é estendido para essa largura mais 10px.

Basta adicionar o valor percentual em uma variável e usar #{$variable} por exemplo

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