I am converting LESS to CSS, there I want to run the LESS function below:
.myPL( @val ) {
.pL @val{
padding-left:@val;
}
}
Function Call:
.myPL( 20px );
Expected result:
.pL20px{padding-left:20px}
But actual result is Syntax Error.
Please help me to concatenate the strings in class name in LESS.
What you are looking for is called selector interpolation ... you can find it here: http://lesscss.org/#-selector-interpolation
Your mixin would need to look like this for it to work:
.myPL( @val ) {
.pL@{val} {
padding-left: @val;
}
}
@val is a number? Could you do .pL@{val*2} ?
@val2: @val * 2; and then use the new val in .pL-@{val2}. And in the properties you can then also add an unit to the number with unit().What you are trying to achieve does not work in LESS:
You could do:
.myPL( @val ) {
padding-left: @val;
}
Why on earth would you manually define each possible variant of padding left with the classname itself? That's not what LESS was designed for, and doesn't really make much sense with the context you've given.
The idea of mixins is to make them reusable, but I can't understand why you'd call a classname in the middle of that mixin. Use LESS mixins properly, and do the following:
.pl(@val) {
padding-left: @val;
}
