In less I can create a function which will convert px into em and return just the value
@em($target, $context: 16px) {
@return ($target / $context) * 1rem;
}
.body {
font-size: em(22px);
padding: 0 em(10px);
}
.body {
font-size: 1.375em;
padding: 0 0.625em;
}
.em(@selector, @target, @context: 16px) {
@{selector}: unit((@target / @context), em);
}
.body {
.em(font-size: 22px);
}
.body {
font-size: 1.375em;
}
0
0.675em
In short, no, you can't define "true" functions in Less. So for the particular use-case the most compact approach is something like this:
@context: 16px;
@u: 1em / @context;
.body {
font-size: 22 * @u;
padding: 0 10 * @u;
}
Or this:
@context: 16px;
@u: 1em / @context;
.body {
font-size: @u * 22px;
padding: 0 @u * 10px;
}
whichever you find more readable (note that arithmetic expressions require parens if you use --strict-math=on
option).