less的使用错误&-的异常

代码中经常使用到less，遇到了个问题，如下：

<div class="box">
    <div class="box-abc">
        鼠标移动倒上去试试
    </div>
</div>

.box{
    &-abc{
        background:#fff;
    }
}
.box:hover{
    &-abc{
        background:red;
    }
}

在开发环境没问题，但到测试环境发布后；看编译后的效果就是如下图：

.box .box-abc:hover-abc{
   //等等
}

后来，改为如下，即好了。

.box:hover{
   .box-abc{
       //代码
   }
}