How to pass a LESS variable into a class name

Question

I have a LESS variable: @columns: 12

I would like to pass this variable into a CSS class name ideally as: .one-{@columns}-inner {}

Is it possible?

What do you mean it doesn't parse correctly ? How are you compiling the files ? Are you getting an error ? — Raja Khoury
– Raja Khoury, Commented Jun 9, 2015 at 11:51
.one-{@columns}-inner {} - This won't work because there is an error and the @ should be present outside the braces but the one in the answer should work unless you are using a very outdated compiler version. — Harry
– Harry, Commented Jun 9, 2015 at 13:30

pinturic · Accepted Answer · 2015-06-09 11:35:49Z

4

Simply you can do it this way:

// Using variables
.one-@{columns}-inner {
    color: black;
}

answered Jun 9, 2015 at 11:35

pinturic

2,2631 gold badge17 silver badges31 bronze badges

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

4 Comments

Blix Over a year ago

I have tried this and that doesn't parse correctly.

Blix Over a year ago

It works but unfortunately I am parsing via less.js. I guess that is the issue I am having.

pinturic Over a year ago

It depends on the compiler version (I think it is from version 1.3 and upgraded in 1.3.1). I have tested it here and it is working: winless.org/online-less-compiler. Which version do you have ?

Blix Over a year ago

1.1.3 ... but I have tested the solution with a grunt compiler and all was fine. Cheers.

Collectives™ on Stack Overflow

How to pass a LESS variable into a class name

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related