javascript - Lesscss - when a number has no units -
how check if number has no unit less? there must shorter way than:
.margin(@i) when (isnumber(@i)) , not (ispixel(@i)) , not (ispercentage(@i)) , not (isem(@i)) , not (isunit(@i,rem)) , not (@i = auto) { ... }
i thought when not (isunit(@i))
trick isn't working...
my goal use default unit , work unit-less functions ".font-size(10)" as possible. default unit should used when value has no unit, if has unit ".font-size(2em)" value keeps unit. when default unit "rem" or rem used unit, function must add pixel value before rem property (older browsers) , calculate rem value:
".font-size(5)" should output: (when @default-unit: rem)
font-size: 5px; font-size: 0.5em;
i've got working following functions:
.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) , not (isunit(@i,rem)) , not (@i = n) { font-size: @i; } .font-size(@i) when not (ispixel(@i)) , not (ispercentage(@i)) , not (isem(@i)) , not (isunit(@i,rem)) , not (@i = auto) , (@unit = rem) , not (@i = n) { font-size: unit(@i,px); font-size: unit(@i/10,rem); } .font-size(@i) when not (ispixel(@i)) , not (ispercentage(@i)) , not (isem(@i)) , not (isunit(@i,rem)) , not (@i = auto) , not (@unit = rem) , not (@i = n) { font-size: unit(@i,px); }
just seems bit want achieve... shorter?
edit: answer of scotts looking for, when wan't use 4 values ".margin(5,10,0,8px)" call 4 needed functions: .margin-top(), .margin-right(), ..." works should rendered css quite long... wondering best way render css shorthand: "margin: 0.5rem,1rem,0,8px;". using scotts function tried making example 2 values:
.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')) , 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')) , 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)) , (isunit(@baseoutputy,rem)) { background-position: @baseoutputx*10px @baseoutputy*10px; } .checkfallback() when (isunit(@baseoutputx,rem)) , not (isunit(@baseoutputy,rem)) { background-position: @baseoutputx*10px @baseoutputy; } .checkfallback() when not (isunit(@baseoutputx,rem)) , (isunit(@baseoutputy,rem)) { background-position: @baseoutputx @baseoutputy*10px; } .checkfallback() when not (isunit(@baseoutputx,rem)) , not (isunit(@baseoutputy,rem)) { } .checkfallback(); background-position: @baseoutputx @baseoutputy; }
using 4 values make verry big less function, better ways?
update: font-sizing
this may in future able reduce some, there bug respect rem
values needs worked out in current (1.4.1) version of less. there still fair bit of code, stays contained in initial mixin call.
less (test case default unit of rem
set)
@defaultunit: rem; .setfontsize(@i) { .runchecks() when not (isnumber(@i)) { @baseoutput: @i; } .runchecks() when (isnumber(@i)) { @tempbaseoutput: (@i * unit(1, @defaultunit)); @passedrem: isunit(@i, 'rem'); //a bug rem required step .checkrem() when not (isunit(@tempbaseoutput, 'rem')) , not (@passedrem) { //keeps passed in non-rem unit or sets default when non rem @baseoutput: (@i * unit(1, @defaultunit)); } .checkrem() when (isunit(@tempbaseoutput, 'rem')), (@passedrem) { //keeps passed in rem unit , value //or sets default rem unit uses passed value px value @rembaseadj: unit(`(('@{defaultunit}' == 'rem' & @{passedrem} == true) ? 1 : 0.1)`); @baseoutput: unit((@i * @rembaseadj), rem); font-size: unit(@i, px) * (10 * @rembaseadj); } .checkrem(); } .runchecks(); font-size: @baseoutput; } .test1 { .setfontsize(5); } .test2 { .setfontsize(5rem); } .test3 { .setfontsize(5px); } .test4 { .setfontsize(5%); } .test5 { .setfontsize(5em); } .test6 { .setfontsize(inherit); }
css output
.test1 { /* i.e. unitless 5 rem default unit */ font-size: 5px; font-size: 0.5rem; } .test2 { /* i.e. passed in rem value */ font-size: 50px; font-size: 5rem; } .test3 { font-size: 5px; } .test4 { font-size: 5%; } .test5 { font-size: 5em; } .test6 { /* string */ font-size: inherit; }
Comments
Post a Comment