Mohamed Hussain Mohamed Hussain - 5 months ago 72
CSS Question

Concatenate String for class name in LESS

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.

Answer

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;
  }
}
Comments