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

我们尝试通过添加这些clases的显式声明来解决它:

.colnum, .colnumdec {
}

但是没有属性会使LESS编译器省略它们,如果我们改为放置一个不相关的属性它可以正常工作:

.colnum, .colnumdec {
    border:inherit;
}

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

Answer 1

问题是LESS抱怨.inputprize { .colnumdec;未申报的mixin.

这是预期的,因为.colnumdec它不在全局范围内(并且.inputprize无法访问定义的.table tbody > tr > td范围.colnumdec).

正确的语法"呼" .colnumdec中.inputprize会是这样.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内容.