Question

在Less语言功能的Lazy Loading部分中，它指出：

当定义变量两次时，使用变量的最后一个定义，从当前范围向上搜索。这类似于css本身，其中定义中的最后一个属性用于确定值。

我想覆盖一个全局变量，但这似乎不起作用：

@border: #fff;

.table {
  border: @border;
}

.table-summary {
  @border: #000;
  .table
}

编译到

.table {
  border: #ffffff;
}
.table-summary {
  border: #ffffff; // I want this to be #000
}

Answer 1

目前，全局范围的优先级高于mixin的调用范围（除非mixin在参数命名空间内定义）。有关详细信息，请参阅#1316，有些人认为这是一个错误，但没有明确的协议。

无论哪种方式，建议都是minimize use of non-parametric mixins，并且尽可能不依赖于间接参数传递。您的示例是参数mixin的完美用例（即使您的代码变得稍微冗长）：

@border-default: #fff;

.table-base(@border: @border-default) {
    border: @border;
}

.table {
    .table-base;
}

.table-summary {
    .table-base(#000); 
}

Alt。如果由于某种原因您无法修改.table类（例如，如果它在外部库中定义），那么就忘了变量并直接覆盖属性，最佳方式是：

@border: #fff;

.table {
    border: @border;
}

.table-summary:extend(.table) {
    border-color: #000;
}

---

从技术上讲，有一种方法可以使用与原始代码段非常接近的代码来实现您想要的功能，但我怀疑它是否真的值得推荐：

@border: #fff;

.table {
    border: @border;
}

.-;.-() { // dummy parametric namespace

.table-summary {
    @border: #000;
    .table;
}

} // end of dummy parametric namespace

根据范围更改mixin中使用的变量

1 个答案:

---