Question

该章节的函数主要用于单位的修改以及某个含有单位值的单位获取。

2.1 default 函数

函数用途： 仅在混合守卫的条件中使用，当无其他 mixin 匹配时返回 true ，反之则返回 false 。

在 Mixins 中我们可以通过 default() 函数结合其他函数对 Mixins 进行保护。

• 输入代码

.x {
  .m(red)                                    {case: darkred}
  .m(@x) when (iscolor(@x)) and (default())  {default-color: @x}
  .m('foo')                                  {case: I am 'foo'}
  .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

  &-blue  {.m(red)}
  &-green {.m(green)}
  &-foo   {.m('foo')}
  &-baz   {.m('baz')}
}

• 输出代码

.x-blue {
  case: darkred;
}

.x-green {
  default-color: #008000;
}

.x-foo {
  case: I am 'foo';
}

.x-baz {
  default-string: and I am the default;
}

2.2 unit 函数

函数用途： 更改或删除尺寸的单位。

参数：

• dimension: 填入一个数值，带单位或者不带
• unit:（可选参数） 填入需要转换的单位，如果未传入，则移除数值的单位。

语法： unit(dimension, ?unit) => value

• 输入代码

.unit {
  width: unit(5px, rem);
  height: unit(50px)
}

• 输出代码

.unit {
  width: 5rem;
  height: 50
}

2.3 get-unit 函数

函数用途： 返回数值的单位。如果参数包含带单位的数字，则该函数返回其单位。不带单位的参数将导致返回一个空值。

参数：带或不带单位的数字。
语法：get-unit(dimension) => value

• 输入代码

.get-unit {
  unit: get-unit(5px)
}

• 输出代码

.get-unit {
  unit: px
}