HTML class name as the link to the LESS variable

Question

I have a set of LESS variables with colors:

@blue: #0e9bd0;
@green: #009646;
@red: #f81010;

I use class names like this:

.color-blue {
  color: @blue;
}

.border-blue {
  border-color: @blue;
}

.bg-blue {
  background: @blue;
}

Is it possible to generate rules automatically for each color? Something like below?

.color-@{name} {
  color: @@name;
}

.border-@{name} {
  border-color: @@name;
}

.bg-@{name} {
  background: @@name;
}

The question is basically a duplicate of https://stackoverflow.com/questions/21440789. But I'd really suggest to consider solutions in the prev. Q/A link and *NOT* using distinct variables and a separate names array. — seven-phases-max, May 25 '17 at 13:39
@seven-phases-max I need to use both class names and Less variables. So the answer of Conan below works good for me, and your links are not exactly what I want. Anyway, thank you very much for answering. — Ruslan, May 26 '17 at 06:36

score 0 · Accepted Answer · answered May 25 '17 at 08:37

// define colours
@blue: #0e9bd0;
@green: #009646;
@red: #f81010;

// import loop helper
@import "https://raw.githubusercontent.com/seven-phases-max/less.curious/master/src/for.less";

// define colour array
@colors: 'green', 'red', 'blue';

  .for(@colors); .-each(@color) {
    @name: e(@color);

      .color-@{name} {
        color: @@name;
      }

      .border-@{name} {
        border-color: @@name;
      }

     .bg-@{name} {
        background: @@name;
     }    

  }

HTML class name as the link to the LESS variable

1 Answers1