How have dynamic class names in LESS CSS and use them as values in function

Question

I want generate flexible color classes for another class like this without writing all of them on LESS as variables:

.link.color-green{
color:green;
}
.link.color-red{
color:red;
}

.link.color-cccccc{
color:#cccccc;
}

.link.color-FFF8DC{
color:#FFF8DC;
}

maybe something like this? but compiler say error:
NameError: variable @colorNameOrHexaCode is undefined

.link{
      .color-@{colorNameOrHexaCode} {

                    color: rgb(@colorNameOrHexaCode);

        }; 
}

I'm not sure how make loop or function for this, sorry.

Aziz · Accepted Answer · 2016-08-17 01:34:03Z

2

You have to create a list of colors first before creating a loop:

.make-classes(@prefix, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i); 
        @key: extract(@pair, 1);
        @value: extract(@pair, 2); 
        .@{prefix}.color-@{key} {
            color: @value;  
        }
    }
}

@colors:
    ~'blue' #7FB3D4,
    ~'gray' #767676,
    ~'green' #8CC079,
    ~'red' #b35d5d;

.make-classes(link, @colors);

Output:

.link.color-blue {
  color: #7fb3d4;
}
.link.color-gray {
  color: #767676;
}
.link.color-green {
  color: #8cc079;
}
.link.color-red {
  color: #b35d5d;
}

answered Aug 17, 2016 at 1:34

Aziz

7,8233 gold badges33 silver badges54 bronze badges

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

1 Comment

klewis Over a year ago

what version of Less uses this syntax?

Collectives™ on Stack Overflow

How have dynamic class names in LESS CSS and use them as values in function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related