少:在循环遍历数组时使用CSS颜色作为变量名

时间:2016-09-12 13:21:31

标签: css less lessphp

以下代码生成颜色类。但是,如果我想要一个类似.c-black.c-white的课程,其中"黑色"和"白色"已经定义了CSS颜色,LESS输出:.c-#000000.c-#ffffff。为简单起见,我不想在阵列中的每一种颜色周围加上引号。有没有办法将每对中的第一个数组值(这是@name循环中的.creatcolorclasses变量)解释为字符串?

谢谢!

@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 个答案:

没有答案