隐式声明的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;
}

问题是，使用未声明的mixin时，在inputprize { .colnumdec；上抱怨较少。

我们试图通过添加这些类的显式声明来解决这个问题：

.colnum, .colnumdec {
}

但是没有属性会使编译器忽略它们，如果我们放入一个不相关的属性，它就会工作得很好：

.colnum, .colnumdec {
    border:inherit;
}

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

Answer 1

的问题是，在.inputprize { .colnumdec;中，使用未声明的mixin的抱怨较少。

这是意料之中的，因为.colnumdec不在全局作用域中(并且.inputprize不能访问定义.colnumdec的.table tbody > tr > td作用域)。

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

解决方案#1：

处理这类事情的通常方法是将共享代码移动到专用的混入中，例如：

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

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