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

我有一个按钮的.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组合成一个吗？

这就是您想要的：

按钮{
背景：@按钮背景；
颜色：@text；
&.小学{
背景图像：线性梯度（#79d858，#569e3d）；
边框颜色：#4a993e；
颜色：白色；
&：悬停{
背景图像：线性梯度（#89e868，#66ae4d）；
}
&：活动，&：聚焦{
背景图像：线性梯度（#99f878，#76be5d）；
}
}
}

这就是你想要的吗：

按钮{
背景：@按钮背景；
颜色：@text；
&.小学{
背景图像：线性梯度（#79d858，#569e3d）；
边框颜色：#4a993e；
颜色：白色；
&：悬停{
背景图像：线性梯度（#89e868，#66ae4d）；
}
&：活动，&：聚焦{
背景图像：线性梯度（#99f878，#76be5d）；
}
}
}