Calcola una percentuale con SCSS / SASS

121

Voglio impostare una larghezza in percentuale in scss tramite calcolo, ma mi dà errori ..

CSS non valido dopo "...- width: (4/12)%": l'espressione prevista (ad es. 1px, grassetto), era ";"

Voglio fare qualcosa di simile

$my_width: (4/12)%;

div{
width: $my_width;
}

come faccio ad aggiungere il segno% lì?

Stessa domanda con px e em

css sass

— Nick Ginanto
fonte

Non c'è niente da giocherellare. Voglio solo aggiungere l'unità del numero al calcolo. Come (400/20) px. Come faccio ad avere un numero e px / em /% in scss? In questo modo potrei avere "variabili globali" che posso cambiare una volta

— Nick Ginanto

Prova ad aggiungere una parentesi come $ my_width: ((4/12)%);

— Sri

Oops .. Scusa, non ho avuto la possibilità di controllarlo e fare un altro tentativo per farlo .. {$ my_width: (4/12)%;}

— Sri

Risposte:

211

Hai provato la funzione percentuale ?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
fonte

esiste una funzione simile per px e em?

— Nick Ginanto

Non sono sicuro, ma nella sezione sorgente della documentazione puoi vedere la logica sottostante: Sass :: Script :: Number.new (value.value * 100, ['%']), quindi penserei che se non lo fanno puoi farlo direttamente o creare tu stesso alcune funzioni wrapper.

— Tomas

@NickGinanto per px puoi semplicemente aggiungere +pxalla fine della riga, ad esempiowidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat No, non dovresti mai farlo in nessuna circostanza. L'aggiunta di unità dovrebbe essere eseguita tramite moltiplicazione (ad esempio $foo + $bar * 1px), concatenando l'unità in questo modo si ottiene solo una stringa.

— cimmanon

@cimmanon è cambiato di recente? Sono sicuro che non è stato così quando ho pubblicato il mio commento.

— Capra scontenta

Un altro modo:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass produrrà il valore in%.

— rlejnieks
fonte

Nota che ho dovuto usare il 100/6 * 1% per farlo funzionare per me, altrimenti sono finito con il 1666,67%.

— sp00n

dove posso trovare una documentazione cosa fa * 100% effettivamente?

— Ini

Sono riuscito a farlo funzionare in questo modo:

div{
   width: (4/12)* 1%;
   }

In questo modo non è necessario utilizzare alcuna funzione speciale.

— Enrique Cuchetti
fonte