隐式声明css类的问题更少

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

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

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

.colnum, .colnumdec {
}

但是没有属性会让编译器忽略它们，如果我们放一个不相关的属性，它就可以正常工作：

.colnum, .colnumdec {
    border:inherit;
}

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

问题是，在

.inputprize{.colnumdec；

上，对未声明的mixin的投诉较少

这是预期的，因为

.colnumdec

不在全局范围内（并且

.inputprize

无法访问定义

.colnumdec

的

表tbody>tr>td

范围）

在

.inputprize

中“call”

.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

内容

问题是，在

.inputprize{.colnumdec；

上，对未声明的mixin的投诉较少

这是预期的，因为

.colnumdec

不在全局范围内（并且

.inputprize

无法访问定义

.colnumdec

的

表tbody>tr>td

范围）

在

.inputprize

中“call”

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

---

这种基于

扩展
的解决方案的另一个重要好处是它不具有侵入性，即您不需要修改
.table tbody>tr>td
内容。
只需在
中省略
.colnumdec；
？：-Djust省略
中的
.colnumdec；
。
中的
.inputprize
？：-DIt似乎是可行的，但可以d有可能使.colnum和.colnumdec直接可用，而不是.colnum（）（我们也对子模板使用此定义，并希望使其他开发人员更容易使用）。使用0参数调用mixin的参数是可选的，因此对于其他开发人员来说#1和#2可能看起来与您最初的示例完全相同（虽然我个人更喜欢通过查看这些参数来区分“真实选择器”和“子模板”（也称为mixin）扩展）。这似乎是可行的，但可以使.colnum和.colnumdec直接可用，而不是.colnum（）（我们也对子模板使用此定义，更喜欢使其他开发人员更容易使用）使用0参数调用mixin的参数是可选的，因此对于其他开发人员来说#1和#2可能与您最初的示例完全相同（尽管我个人更喜欢通过查看这些参数来区分“实选择器”和“子模板”（也称为mixin）扩展）。