如何检查一个数字是否没有更少的单位?必须有比以下更短的方法:
.margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) {
...
}
我以为when not (isunit(@i))
可以解决问题,但这不起作用...
我的目标是使用默认单位并尽可能使用像“.font-size(10)”这样的无单位函数。仅当值没有单位时才应使用默认单位,如果它具有像“.font-size(2em)”这样的单位,则值保持其单位。当默认单位为“rem”或使用rem作为单位时,该函数必须在rem属性前添加一个像素值(旧浏览器)并计算rem值:
".font-size(5)" 应该输出:(当@default-unit: rem 时)
font-size: 5px;
font-size: 0.5em;
我已经完全使用以下功能:
.font-size(@i) when (isunit(@i,rem)) {
font-size: unit(@i*10,px);
font-size: @i;
}
.font-size(@i) when (ispixel(@i)), (ispercentage(@i)), (isem(@i)), (@i = auto) and not (isunit(@i,rem)) and not (@i = n) {
font-size: @i;
}
.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and (@unit = rem) and not (@i = n) {
font-size: unit(@i,px);
font-size: unit(@i/10,rem);
}
.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and not (@unit = rem) and not (@i = n) {
font-size: unit(@i,px);
}
对于我想要实现的目标来说似乎有点多......这可以更短吗?
编辑:Scotts 的答案正是我一直在寻找的,现在当我不想使用像“.margin(5,10,0,8px)”这样的 4 个值时,我调用了 4 个需要的函数:.margin-top( ), .margin-right(), ..." 这就像它应该的那样工作,但是渲染的 css 很长...我想知道渲染 css 速记的最佳方法是什么:"margin: 0.5rem,1rem ,0,8px;"。使用 Scotts 函数,我尝试为 2 个值创建一个示例:
.background-position(@x,@y) {
.runChecksx() when not (isnumber(@x)) {
@baseOutputx: @x;
}
.runChecksx() when (isnumber(@x)) {
@tempbaseOutputx: (@x * unit(1, @unit));
@passedRemx: isunit(@x, 'rem');
.checkRemx() when not (isunit(@tempbaseOutputx, 'rem')) and not (@passedRemx) {
@baseOutputx: (@x * unit(1, @unit));
}
.checkRemx() when (isunit(@tempbaseOutputx, 'rem')), (@passedRemx) {
@remBaseAdjx: unit(`(('@{unit}' == 'rem' & @{passedRemx} == true) ? 1 : 0.1)`);
@baseOutputx: unit((@x * @remBaseAdjx), rem);
}
.checkRemx();
}
.runChecksy() when not (isnumber(@y)) {
@baseOutputy: @y;
}
.runChecksy() when (isnumber(@y)) {
@tempbaseOutputy: (@y * unit(1, @unit));
@passedRemy: isunit(@y, 'rem');
.checkRemy() when not (isunit(@tempbaseOutputy, 'rem')) and not (@passedRemy) {
@baseOutputy: (@y * unit(1, @unit));
}
.checkRemy() when (isunit(@tempbaseOutputy, 'rem')), (@passedRemy) {
@remBaseAdjy: unit(`(('@{unit}' == 'rem' & @{passedRemy} == true) ? 1 : 0.1)`);
@baseOutputy: unit((@y * @remBaseAdjy), rem);
}
.checkRemy();
}
.runChecksx();
.runChecksy();
.checkFallback() when (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx*10px @baseOutputy*10px;
}
.checkFallback() when (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx*10px @baseOutputy;
}
.checkFallback() when not (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
background-position: @baseOutputx @baseOutputy*10px;
}
.checkFallback() when not (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) { }
.checkFallback();
background-position: @baseOutputx @baseOutputy;
}
使用 4 个值会使这个函数变得非常小,还有更好的方法吗?