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;与未申报的混合。

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

.colnum, .colnumdec {
}

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

.colnum, .colnumdec {
    border:inherit;
}

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

Answer 1

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

这是预期的，因为.colnumdec不在全局范围内（并且.inputprize无权访问定义.table tbody > tr > td的{{1}}范围。

在.colnumdec中“调用”.colnumdec的正确语法类似于.inputprize，但LESS不允许使用非类或非id选择器（即非.table tbody > tr > td.colnumdec; 1}}和非.类似#）作为mixins或名称空间。

解决方案＃1：

处理这类内容的常用方法是将共享代码移动到专用的mixin中，例如：

body

解决方案＃2：

＃1会产生相当臃肿的CSS输出，因此最近更流行的更优化的方法是使用“Extend”功能，例如：

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

这种基于.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内容。

隐式声明的css类没有问题

1 个答案:

解决方案＃1：

解决方案＃2：