杂项函数(2)
优质
小牛编辑
127浏览
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
}