CODEWITHSUNDEEP
less
user2870826
user2870826

Reputation: 21

Less Mixin Variable within CSS selector

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)

Upvotes: 0

Views: 183

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

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.

Upvotes: 2

Related Questions