H i,
Hoping you can help.
Is there a way for LESS to return just a value - feel like I'm missing something very obvious
Say I have:
@unit:em;
@basevalue:1;
Can I use something to give me a shorthand return for -
.someClass { padding: ~'@{basevalue}@{unit}'; }
Like say:
.returnUnit() { ~'@{basevalue}@{unit}'; }
.someClass { padding: returnUnit(); }
because what I'm ultimately hoping for is:
.returnUnit(@val) { @basevalue*@val@{unit}; }
.someClass { padding:returnUnit(0.5); }
Using a mixing I have to define the style property, however the value of this return function would be used for many different css properties.
Hope I made sense and I am just lacking deeper rtfm.
Many Thanks if you can.
Update as @Chococrocs pointer to the docs, thanks.
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // "call" the mixin
padding: @average; // use its "return" value
}
.unitRelative(@val) {
@value : @basevalue*@val;
@relative: ~'@{value}@{unit}';
}
/* usage */
.someClass {
.unitRelative(2);
padding: @relative;
}
But not when
.someClass {
.unitRelative(2);
padding:@relative;
.unitRelative(3);
margin:@relative;
}
Is there another way ?
LESS has no way as of yet to create a true "function," so we cope with it.
You can just use the unit function, like so:
LESS
.someClass { padding: unit(@basevalue, @unit); }
.someOtherClass { padding: unit(@basevalue*0.5, @unit); }
CSS
.someClass {
padding: 1em;
}
.someOtherClass {
padding: 0.5em;
}
The mixins as functions is okay in some situations, but as you discovered, has the limitation of only setting the value once on the first call (and that is assuming a variable of the same name does not exist in that scope already).
LESS (first works right, second doesn't)
.returnUnit(@val:1) {
@return: unit(@basevalue*@val, @unit);
}
.someThirdClass {
.returnUnit(0.4);
padding: @return;
}
.someOoopsClass {
.returnUnit(0.4);
padding: @return;
.returnUnit(0.3);
margin: @return;
}
CSS Output
.someThirdClass {
padding: 0.4em;
}
.someOoopsClass {
padding: 0.4em;
margin: 0.4em; /* Ooops! Not 0.3em! */
}
Limitation of the Second idea can be avoided by a second wrapping, as it isolates the scope for each variable returned by .returnUnit()
, like so:
LESS
.someAccurateClass {
& {
.returnUnit(0.4);
padding: @return;
}
& {
.returnUnit(0.3);
margin: @return;
}
}
CSS Output
.someAccurateClass {
padding: 0.4em;
margin: 0.3em; /* Yes! */
}
It may be better to merge ideas from the First and Third by adding some global variables and doing this:
LESS
@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);
.someAwesomeClass {
& {
@val: .2;
padding: @setUnit;
}
& {
@val: .1;
margin: @setUnit;
}
}
CSS Output
.someAwesomeClass {
padding: 0.2em;
margin: 0.1em;
}
So here we are using the unit
function still as the First idea, but have assigned it to the variable @setUnit
, so each time the variable is called, it runs the function. We still isolate our property blocks using the & {}
syntax like in the Third solution, but now we just set the @val
to what we want and call the @setUnit
where we want.