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

The problem is that LESS complains at .inputprize { .colnumdec; with undeclared mixin.

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

在 .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 输出，所以最近越来越流行的更优化的方法是使用“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 的解决方案的另一个重要好处是它不是侵入性的，即您不需要修改 .table tbody > tr > td 内容。