css - 如何使用 .less 在按钮上组合类？

Question

我有这个按钮的 .less 文件:

 button {
        background: @button-background;
        color: @text;

        &.primary {
            background-image: linear-gradient(#79d858, #569e3d);
            border-color: #4a993e;
            color: white;
        }

        &.primary:hover {
            background-image: linear-gradient(#89e868, #66ae4d);
            border-color: #4a993e;
            color: white;
        }

        &.primary:active,
        &.primary:focus {
            background-image: linear-gradient(#99f878, #76be5d);
            border-color: #4a993e;
            color: white;
        }

    }

有人可以就如何将所有 &.primary 合并为一个提供建议吗？

Answer 1

这是你想要的吗:

button {
    background: @button-background;
    color: @text;

    &.primary {
        background-image: linear-gradient(#79d858, #569e3d);
        border-color: #4a993e;
        color: white;

        &:hover {
            background-image: linear-gradient(#89e868, #66ae4d);
        }

        &:active, &:focus {
            background-image: linear-gradient(#99f878, #76be5d);
        }
    }
}

DEMO