Sass和舍入数字。这可以配置吗?

时间:2011-10-06 09:30:26

标签: css sass compass-sass responsive-design

有没有办法让我修改Sass处理小数位的方式?我看到一些人说Sass会动态地执行响应式布局所需的(目标/父级)* 100计算,并在编译时输出结果。它甚至有一个百分比函数,它将基本上取两个值并执行此操作。

唉,Sass只会给我三个小数位。到目前为止,我的理解是,在某些情况下,这可能不足以让所有浏览器在没有任何打嗝的情况下正确显示布局。

任何人都可以帮我解决这个问题吗?

修改

解决。如果其他人感兴趣,我设法在Sass的number.rb中完成我想要的,改变@precision的值。这会改变所有浮点数的输出方式。

3 个答案:

答案 0 :(得分:14)

如果您使用Compass,则可以轻松指定项目文件(config.rb)中的精度而不会破坏核心:

Sass::Script::Number.precision = 8

有关详细信息,请参阅Sass documentation

答案 1 :(得分:5)

也可以使用命令行中的--precision进行配置,请参阅SASS Changelog, version 3.1.8

还应该补充一点,如果您想直接在@precision中修改numbers.rb,可以找到numbers.rb(至少在OS X上),在这里:

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

1.8和3.1.10当然应该替换为您的(最好是最新的)版本号。

答案 2 :(得分: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