css - 隐式声明的CSS类的较少问题

我们在styles.less中有以下声明：.table tbody > tr > td { &.colnum, &.colnumdec { > input[type=text], > input[type=number] { text-align: center; } } }.inputquantity { .colnumdec; width: 50px;}.inputprize { .colnumdec; width: 70px;}问题在于，LESS在inputprize {.colnumdec;使用未声明的mixin。我们试图通过添加明确的声明来解决这些问题：.colnum, .colnumdec {}但是没有属性会使LESS编译器忽略它们，如果我们改为放一个不相关的属性，它将很好地工作：.colnum, .colnumdec { border:inherit;}解决这个问题的正确方法是什么？ 最佳答案 问题在于，LESS在.inputprize { .colnumdec;处抱怨未声明的mixin。这是可以预期的，因为.colnumdec不在全局范围内（并且.inputprize不能访问已定义.table tbody > tr > td的.colnumdec范围）。在.colnumdec中“调用” .inputprize的正确语法类似于.table tbody > tr > td.colnumdec;，但是LESS不允许使用非类或非id选择器（即，非.和非#像）作为mixin或名称空间。解决方案1：处理此类内容的通常方法是将共享代码移入专用的mixin，例如：.colnum() { > input[type=text], > input[type=number] { text-align: center; }}.table tbody > tr > td { &.colnum, &.colnumdec { .colnum(); }}.inputquantity { .colnum(); // parens are optional here width: 50px;}.inputprize { .colnum(); width: 70px;}解决方案2：＃1产生非常肿的CSS输出，因此最近越来越流行的更优化的方法是使用“ Extend”功能，例如：.table tbody > tr > td { &.colnum, &.colnumdec { > input[type=text], > input[type=number] { text-align: center; } }}.colnum() { &:extend(.table tbody > tr > td.colnumdec all);}.inputquantity { .colnum(); // parens are optional here width: 50px;}.inputprize { .colnum(); width: 70px;}这种基于body的解决方案的另一个重要优点是它不具干扰性，即您无需修改​​extend内容。关于css - 隐式声明的CSS类的较少问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20494912/