Sass calcola la percentuale meno px

133

Voglio essere in grado di fare quanto segue:

height: 25% - 5px;

Ovviamente quando lo faccio ottengo l'errore:

Incompatible units: 'px' and '%'.

sass

— Mike Fielden
fonte

Ottengo l' Invalid property valueerrore. In tutti i browser inclusa la versione Canary di Chrome.

— Mike Fielden,

Se c'è una funzione Sass che mi procurerebbe quello che voglio che è bello, stavo solo giocando con calc...

— Mike Fielden

Sì :) Come ho detto, non mi importa di come è calcstato se fossi andato per primo e non ha funzionato. Sembra che non calcfunzioni in nessuno dei miei browser, quindi immagino che un'implementazione sass sarebbe meglio.

— Mike Fielden,

1

Sass non può fungere da polyfill per calc (). Non sa come convertire il 25% in px, quindi può fare i calcoli e generare i CSS. A seconda delle tue esatte esigenze, potrebbe esserci un'alternativa, come l'uso della famiglia di tavoli da esposizione, la modifica del ridimensionamento delle scatole o l'utilizzo di margini negativi ( jsfiddle.net/5JZGt )

— cimmanon

239

Sass non può eseguire l'aritmetica su valori che non possono essere convertiti da un'unità alla successiva. Sass non ha modo di sapere esattamente quanto sia ampio il "100%" in termini di pixel o di qualsiasi altra unità. È qualcosa che solo il browser conosce.

Devi usare calc()invece. Verifica la compatibilità del browser su Posso usare ...

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

Se i tuoi valori sono in variabili, potrebbe essere necessario utilizzare l'interpolazione per trasformarli in stringhe (altrimenti Sass prova solo a eseguire l'aritmetica):

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

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

— chrisgonzalez
fonte

5

Direi che calc () non funziona affatto nella maggior parte dei browser. Le piattaforme mobili sono importanti quanto i desktop.

— Dalgard,

3

Nessun argomento lì, ma conta i browser! Più supporto calc () che no, e ancora di più lo supporterà nel prossimo futuro!

— chrisgonzalez,

5

Ho avuto problemi di larghezza utilizzando una variabile all'interno delle funzioni di Calc, ma ha trovato qui: stackoverflow.com/questions/13542164/... che ho potuto fare riferimento alla variabile in questo modo: calc(25% - #{$var}).

— mlunoe,

Per dare seguito alla dichiarazione di @ dalgard, in termini di browser esistenti e rilasciati, calc non funziona più di quanto funzioni. Vedi: caniuse.com/#search=calc

— imjared

3

Puoi sempre usare un'opzione di width: 22%widthcalc

— fallback

23

Esiste una calcfunzione sia in SCSS [tempo di compilazione] che in CSS [tempo di esecuzione]. Probabilmente stai invocando il primo anziché il secondo.

Per ovvie ragioni, la miscelazione delle unità non funzionerà in fase di compilazione, ma in fase di esecuzione.

È possibile forzare quest'ultimo utilizzando unquoteuna funzione SCSS.

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

— Sandstrom
fonte

14

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

— Edwin Fernando Marroquin Busto
fonte

2

Grazie per aver pubblicato una risposta a questa domanda! Le risposte di solo codice sono scoraggiate su Stack Overflow, perché un dump di codice senza contesto non spiega come o perché la soluzione funzionerà, rendendo difficile per il poster originale (o eventuali lettori futuri) capire la logica che sta dietro. Per favore, modifica la tua domanda e includi una spiegazione del tuo codice in modo che altri possano beneficiare della tua risposta. Grazie!

— Massimiliano Laumeister,

Questo mi ha salvato. width: unquote ("calc (100% - # {$ leftnav-width})");

— httpete,

5

SE conosci la larghezza del contenitore, puoi fare così:

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

Sono consapevole che in molti casi #container potrebbe avere una larghezza relativa. Quindi questo non funzionerebbe.

— Design di Adrian
fonte

2

Ci scusiamo per aver rianimato il vecchio thread - Compassa il tratto con uno pseudo-selettore after: potrebbe adattarsi al tuo scopo - ad es. se si desidera che un div riempia la larghezza da sinistra a (50% + 10px) dello schermo, è possibile utilizzare (nella sintassi con rientro SASS):

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

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

— Bryce Gilhome
fonte

1

c'è un miscuglio meno o sass per questo da qualche parte? calc non sembra funzionare molto bene.

— v3nt,

0

Basta aggiungere il valore percentuale in una variabile e utilizzare #{$variable} ad esempio

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

— Aftab Ahmed
fonte