Sass calcolare per cento meno px

Question

voglio essere in grado di effettuare le seguenti operazioni:

height: 25% - 5px; 

Ovviamente quando faccio che ottengo l'errore:

Incompatible units: 'px' and '%'. 

Answer 1

Sass non può eseguire operazioni aritmetiche su valori che non possono essere convertito da un'unità all'altra. Sass non ha modo di sapere esattamente quanto "100%" sia in termini di pixel o di qualsiasi altra unità. È qualcosa che solo il browser conosce.

È necessario utilizzare calc(). Check browser compatibility on Can I use...

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

Se i valori sono variabili, potrebbe essere necessario usare l'interpolazione trasformarli in stringhe (altrimenti Sass cerca solo di eseguire operazioni aritmetiche):

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

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

Answer 2

SE si conosce la larghezza del il contenitore, puoi fare così:

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

Sono consapevole che in molti casi #contenitore potrebbe avere un parente larghezza. Quindi questo non funzionerebbe.

Answer 3

Ci scusiamo per la rivitalizzazione del thread precedente - L'allungamento della bussola con uno: dopo lo pseudo-selettore potrebbe essere adatto al tuo scopo, ad es. se si desidera un div per riempire larghezza da sinistra a (50% + 10px) dello schermo è possibile utilizzare (in SASS sintassi rientrato):

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

L': dopo elemento riempie il 50% alla destra di .Esempio (lasciando disponibile il 50% per la larghezza di .example), quindi .example viene esteso a quella larghezza più 10 px.

Answer 4

C'è una funzione calc in SCSS [in fase di compilazione] e in CSS [in fase di esecuzione]. Probabilmente stai invocando il primo anziché il secondo.

Per ovvi motivi, le unità di missaggio non funzioneranno in fase di compilazione, ma verranno eseguite in fase di esecuzione.

È possibile forzare quest'ultimo utilizzando unquote, una funzione SCSS.

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

Answer 5

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