Less Mixin Variable within CSS selector

Question

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)

Community · Accepted Answer · 2017-05-23 12:12:51Z

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.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Jan 16, 2014 at 9:45

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Less Mixin Variable within CSS selector

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related