隐式声明css类的问题较少

Question

我们在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;
}

解决这个问题的正确方法是什么？

Answer 1

问题是LESS在.inputprize { .colnumdec;上使用未声明的mixin进行抱怨。

这是预期的，因为.colnumdec不在全局作用域中（并且.inputprize不能访问定义了.colnumdec的.table tbody > tr > td作用域）。

在.inputprize中"调用".colnumdec的正确语法应该类似于.table tbody > tr > td.colnumdec;，但是LESS不允许使用非类或非id选择器（即非.和非#，如body）作为混合元素或名称空间。

解决方案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输出，因此最近越来越流行的更优化的方法是使用"扩展"功能，例如：

.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;
}

这种基于extend的解决方案的另一个重要好处是它不具有侵入性，即不需要修改.table tbody > tr > td的内容。