2011-10-06 15 views
7

C'è qualche modo per me di modificare il modo in cui Sass gestirà le cifre decimali? Ho visto alcune persone dire che Sass eseguirà dinamicamente il calcolo (target/genitore) * 100 necessario per i layout responsive e produrrà il risultato al momento della compilazione. Ha anche una funzione percentuale, che essenzialmente prenderà i due valori e lo farà.Sass e numeri di arrotondamento. Può essere configurato?

Ahimè, Sass mi darà sempre solo 3 cifre decimali. La mia comprensione fino a questo punto è stata che in alcuni casi, questo potrebbe non essere un grado sufficiente di accuratezza per tutti i browser per visualizzare correttamente il layout senza alcun inconveniente.

Qualcuno può aiutarmi ad andare fino in fondo?

EDIT

risolto. Nel caso in cui qualcun altro fosse interessato, sono riuscito a realizzare ciò che volevo nel numero.rb di Sass, cambiando il valore di @precision. Ciò altera il modo in cui vengono riprodotti tutti i float.

risposta

4

Può anche essere configurato utilizzando --precision nella riga di comando, vedere SASS Changelog, version 3.1.8.

Dovrebbe anche aggiungere che se si desidera modificare @precision in numbers.rb direttamente, è possibile trovare numbers.rb (almeno su OS X), qui:

/usr/lib/ruby/user-gems/1.8/gems/sass-3.1.10/lib/sass/script 

1,8 e 3.1.10 dovrebbero naturalmente essere sostituito con i tuoi numeri di versione (preferibilmente l'ultima).

+0

Siete riusciti a ottenere questo lavoro? Quando provo "sass --precision 6" non succede nulla. – Jon

+0

@Jon la sintassi è leggermente diversa: '--precision = 6' ... quindi invece di' 'hai bisogno di un' = ' – conceptdeluxe

14

Se si utilizza la bussola, si può facilmente specificare la precisione nel file di progetto (config.rb) senza l'hacking il nucleo:

Sass::Script::Number.precision = 8 

Per ulteriori informazioni vedere Sass documentation

0

primo set your default precision a la massima precisione di cui avrai bisogno nel tuo progetto.

Quindi, utilizzare una funzione come quella riportata di seguito (basata su this function by Takeru Suzuki) per personalizzare il numero di decimali a livello delle singole proprietà.

Codice:

@function decimal-round ($number, $digits: 0, $mode: round) { 
    $n: 1; 
    // $number must be a number 
    @if type-of($number) != number { 
     @warn '#{ $number } is not a number.'; 
     @return $number; 
    } 
    // $digits must be a unitless number 
    @if type-of($digits) != number { 
     @warn '#{ $digits } is not a number.'; 
     @return $number; 
    } @else if not unitless($digits) { 
     @warn '#{ $digits } has a unit.'; 
     @return $number; 
    } 
    @if $digits > 0 { 
     @for $i from 1 through $digits { 
      $n: $n * 10; 
     } 
    } 
    @if $mode == round { 
     @return round($number * $n)/$n; 
    } @else if $mode == ceil { 
     @return ceil($number * $n)/$n; 
    } @else if $mode == floor { 
     @return floor($number * $n)/$n; 
    } @else { 
     @warn '#{ $mode } is undefined keyword.'; 
     @return $number; 
    } 
} 

uscita:

decimal-round(0.333) => 0 
decimal-round(0.333, 1) => 0.3 
decimal-round(0.333, 2) => 0.33 
decimal-round(0.666) => 1 
decimal-round(0.666, 1) => 0.7 
decimal-round(0.666, 2) => 0.67 
Problemi correlati