LESS: Using CSS colors as variable names when looping through array

160 views Asked by At

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();
0

There are 0 answers