在SASS中强制一个值

时间:2013-06-16 06:08:23

标签: function sass coerce

我正在尝试在SASS中执行以下语句:

($value * $ratio) + "em";

我正在尝试将其编译为16em之类的结果,而是获得"16em"

似乎有coercion function coerce(num_units, den_units),但我不理解文档,它没有提供任何示例,当我尝试编译它时,它只是将函数吐出来一个字符串。

有人能告诉我如何使这个功能起作用吗?

1 个答案:

答案 0 :(得分:2)

您已经提供了SASS源代码文档的链接,该文档位于Ruby中。

coerce函数是一个内部函数,实际上应该作为一个方法应用于数字,例如。 G。 some_number.coerce(...)

此功能不适用于SASS。

有关SASS中可用功能的列表,请参阅此页:http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

没有现有的SASS功能来操纵单位,所以你必须创建自己的:

@function strip-units($value)
  @if unitless($value)
    @return $value
  @else
    @return $value / ($value * 0 + 1)


@function add-unit($value, $new-unit)
  @return $value + 0#{$new-unit}


@function change-units($value, $new-unit)
  @return add-unit(strip-units($value), $new-unit)


$pxs-in-em: 16
@function pxtoem($px-value)
  @return change-units($px-value / $pxs-in-em, em)
@function emtopx($em-value)
  @return change-units($em-value * $pxs-in-em, px)




// Removing "px" from 1px
@warn "strip-units(1px)", strip-units(1px) // => 1

// Adding "px" to 1
@warn "add-unit(1, px)", add-unit(1, px) // => 1px

// Changing 1px to 1em
@warn "change-units(1px, em)", change-units(1px, em) // => 1em

// Converting 16px to 1em
@warn "pxtoem(16px)", pxtoem(16px) // => 1em

// Converting 1em to 16px
@warn "emtopx(1em)", emtopx(1em) // => 16px

演示:http://sassbin.com/gist/5791446/