【问题标题】:Sass and rounding down numbers. Can this be configured?Sass 和四舍五入的数字。这个可以配置吗?
【发布时间】:2011-12-02 02:47:00
【问题描述】:

我有什么办法可以修改 Sass 处理小数位的方式吗?看到有几个人说sass会动态做响应式布局需要的(target/parent)*100计算,并在编译时输出结果。它甚至还有一个百分比函数,它基本上会取两个值并执行此操作。

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

谁能帮我弄清楚这个问题?

编辑

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

【问题讨论】:

    标签: css sass compass-sass responsive-design


    【解决方案1】:

    也可以在命令行中使用--precision进行配置,见SASS Changelog, version 3.1.8

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

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

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

    【讨论】:

    • 你有没有设法让它工作?当我尝试“sass --precision 6”时没有任何反应。
    • @Jon 的语法略有不同:--precision=6 ... 所以你需要一个 = 而不是 ` `
    【解决方案2】:

    如果您使用 Compass,您可以轻松地在项目文件 (config.rb) 中指定精度,而无需破解核心:

    Sass::Script::Number.precision = 8
    

    欲了解更多信息,请参阅Sass documentation

    【讨论】:

      【解决方案3】:

      首先将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
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2015-07-06
        • 2015-11-12
        • 2014-05-25
        • 1970-01-01
        • 1970-01-01
        • 2017-09-21
        • 1970-01-01
        相关资源
        最近更新 更多