0

The following code generates color classes. However, if I want a class like .c-black or .c-white where "black" and "white" are already defined CSS colors, LESS outputs: .c-#000000 or .c-#ffffff instead. I'd prefer not to have to put quotes around every single color in the array, for simplicity's sake. Is there a way to interpret the first array value (this is the @name variable inside the .creatcolorclasses loop) in each pair as a string?

Thank you!

@colors: black #000, white #fff, blue #008FD6, bluehover #44A1E0, grayborder #DBDBDB;

.creatcolorclasses(@iterator:1) when(@iterator <= length(@colors)) {
    @name: extract(extract(@colors, @iterator),1);
    @thecolor: extract(extract(@colors, @iterator),2);

    .c-@{name} {
        color: @thecolor !important;
    }
    .bg-@{name} {
        background-color: @thecolor !important;
    }
    .bt-@{name} {
        border-top: 1px solid @thecolor !important;
    }   
    .bb-@{name} {
        border-bottom: 1px solid @thecolor !important;
    }

    .creatcolorclasses((@iterator + 1));
}
.creatcolorclasses();
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
  • 1
    Read this question, i think this helpful for you: http://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less – Provie9 Sep 12 '16 at 13:41
  • That question presents the same problem that I'm trying to solve. I need "black" to be interpreted as a string to be used in the class name. In the example from that question "black" is being used as a CSS value. – HandiworkNYC.com Sep 12 '16 at 13:46
  • Am I misunderstanding? Sounds like you could just do `@black: #4b4b4b; @colors: black @black…`, which will compile to `.c-black {color: #4b4b4b !important;}` etc. – henry Sep 12 '16 at 16:35
  • Works fine in http://less2css.org/. Which version of Less are you using? –  Sep 13 '16 at 07:16

0 Answers0