0

Is is possible to concatonate the value of a less mixin variable within a css selector name?

ie:

.leftImage{
    .alignContent(left);
}

.alignContent(@side: left; @marAmount: 20px;){
    img{
        float: @side
        margin-@side: @marAmount;
    } 
}

So what im trying to do is mixin the value of @side (in this instance) with a partial css selector of 'margin-' ultimately trying to create 'margin-'left'' (without the quotes)

user2870826
  • 21
  • 3

1 Answers1

2

In LESS 1.6.x and higher it is as simple as: 

.leftImage {
    .alignContent(left);
}

.alignContent(@side: left, @marAmount: 20px) {
    img {
        float: @side;
        margin-@{side}: @marAmount;
    } 
}

But same is possible with earlier versions too, just needs some gentle hacks: Using variables in property names in LESS (dynamic properties / property name interpolation) etc.

Community
  • 1
  • 1
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57