如何使用.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;
        }

    }

有人可以就如何将所有＆amp; .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