less 函數 循環 變量寫法

  案例上一個 覆蓋element-ui按鈕 less

@primary: #3a70df;
@danger: #df3a25;
@success: #2fcd77;
@warning: #fba13b;
@white: #ffffff;
@black: #000000;
@textBlack: #383838;
@ccc: #cccccc;
@colorlist: @danger, @primary, @success, @warning;
@colorTypelist: danger, primary, success, warning;

/* 按鈕樣式開始 */
.setBtnColor(@type,@color) {
    .el-button--@{type}.is-plain {
        border-color: @color;
        color: @color;
        background: @white;

        &:hover, &:focus {
            border-color: mix(@white, @color, 20%);
            color: mix(@white, @color, 20%);
            background-color: mix(@white, @color, 90%);
        }

        &:active {
            border-color: mix(@black, @color, 20%);
            color: mix(@black, @color, 20%);
            background-color: mix(@white, @color, 80%);
        }
    }

    .el-button.is-disabled {
        border-color: @ccc;
        color: @white;
        background: @ccc;

        &:hover, &:focus {
            border-color: @ccc;
            color: @white;
            background: @ccc;
        }

        &:active {
            border-color: @ccc;
            color: @white;
            background: @ccc;
        }
    }
}

.loopBtnColor(@i) when (@i < (length(@colorlist)+1)) {
    .setBtnColor(extract(@colorTypelist, @i), extract(@colorlist, @i));
    .loopBtnColor(@i+1);
}

.loopBtnColor(1);