当前位置: 首页 > 文档资料 > Less 入门教程 >

杂项函数(2)

优质
小牛编辑
126浏览
2023-12-01

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

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
}