math - Sassで数値を丸め、小数点以下の桁数を調整する

Question

丸めが発生する桁を変更する方法は、この2.0242914979757085％からこの2.024％への丸めを停止したいと思います。出力cssの小数点以下の桁数を調整したい

Answer 1

追加の関数を使用しない簡単なオプションは、数値に1000を掛けてから丸め、次に1000で割ることです。

round($percent * 1000) / 1000;

Answer 2

SASS変更ログから：

Sassの数値の数値精度は--precision、コマンドラインのオプションを使用して設定できるようになりました。さらに、Sass :: Script :: Number.precisionを整数（デフォルトは3）に設定することで、Sass出力のデフォルトの精度の桁数を変更できるようになりました。この値を変更できるようになったため、Sass :: Script::NumberのPRECISION定数は非推奨になりました。万が一、コードで使用していた場合は、代わりにSass :: Script::Number.precision_factorを使用する必要があります。

これはSASS3.1.8で追加されました。

Answer 3

次の関数を使用できます。これは、鈴木武によって作成された関数をわずかに改良したものです。

@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

Answer 4

次のこともできます。

@function ceilHundredths($numbers) {
    $numbers: $numbers * 10000;

    @if ($numbers < 1) {
        $numbers: $numbers - 1;

    } @else {
        $numbers: $numbers + 1;
    }

    @return round($numbers)/ 100#{"%"};

}

.test--regular {
    margin-left: percentage( -1 / 3 );
}

.test {
    margin-left: ceilHundredths( -1 / 3 );
}

.test--regular--2 {
    margin-left: percentage( 1 / 3 );
}

.test--2 {
    margin-left: ceilHundredths( 1 / 3 );
}

Answer 5

厳密に言えば、これはあなたの質問に対する答えではありませんが、小数点以下の桁数を削除したいだけの場合は、次のようにすることもできます。

font-size: round(12.5); /* => 12 */

フォントサイズなど、高レベルの精度を必要としない値に適している場合があります。