2011-10-06 15 views
7

Sassが小数点以下の桁を扱う方法を変更する方法はありますか? Sassは、レスポンシブなレイアウトに必要な(ターゲット/親)* 100計算を動的に行い、コンパイル時に結果を出力すると言った人がいました。基本的に2つの値をとり、これを行うパーセンテージ関数もあります。数字を四捨五入して四捨五入します。これは設定できますか?

ああ、サスは今まで私の3小数点以下の桁数を与えます。この点までの私の理解は、場合によっては、すべてのブラウザが何の問題もなくレイアウトを適切に表示するのに十分な精度ではないかもしれないということでした。

誰でも私にこれを下すのを助けることができますか?

EDIT解決

。他の誰かが興味を持っていれば、私はSassのnumber.rbで@precisionの価値を変えたいと思ったものを達成することができました。これにより、すべてのフロートが出力される方法が変わります。

答えて

4

また、コマンドラインで--precisionを使用して設定することもできます(SASS Changelog, version 3.1.8を参照)。

また、あなたが直接numbers.rb@precisionを編集したい場合、あなたはここで、(少なくともOS X上で)numbers.rbを見つけることができることを追加する必要があります:

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

1.8および3.1.10をもちろんに置き換える必要がありますあなたの(できれば最新の)バージョン番号。

+0

は、あなたがこの仕事を得ることに成功したことがありますか?私が "sass --precision 6"を試しても何も起こりません。 – Jon

+0

@Jon構文は若干異なります: '--precision = 6' ...' 'の代わりに' = ' – conceptdeluxe

14

あなたはコンパスを使用している場合は、簡単にコアをハックすることなく、プロジェクトファイル(config.rb)の精度を指定することができます。

Sass::Script::Number.precision = 8 

詳細についてはSass documentation

0

まずにyour default precisionを設定見ますプロジェクトで必要とされる最高の精度です。

次に、以下のような関数(this function by Takeru Suzukiに基づいています)を使用して、個々のプロパティのレベルで小数点以下の桁数をカスタマイズします。

コード:

@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; 
    } 
} 

出力:

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 
関連する問題