少见＆amp; FuelUX树 - 更改步骤列表的宽度

Question

我不确定这是不是一个问题或FuelUX问题，但我会将它发布为......

我正在尝试更改ul.steps元素的宽度，具体取决于具有class="complete"个子元素的数量。

这可能与LESS有关，还是我必须做一些自定义jQuery？

当前宽度为224px，我希望每个类都减少56px。

Answer 1

一旦CSS已经编译，LESS预处理器就不会有任何帮助，因为它在你加载页面之前就被编译了。

您需要知道页面上$('.complete')的数量，然后设置宽度。完成步骤的数量将根据用户交互进行更改。

Answer 2

使用Less，您可以使用如下所示的内容：

.reduceWidth(@width: 224px; @step:56px; @list:'li'; @listItem:'li') {
@selector: ~"@{list}";
@{selector} {
width: ~"@{width}";
}
& when ((@width - @step) > 0) {
.reduceWidth((@width - @step); @step; ~"@{list} @{listItem}");
}
}

ul.steps {
.reduceWidth();
}

输出：

ul.steps li {
  width: 224px;
}
ul.steps li li {
  width: 168px;
}
ul.steps li li li {
  width: 112px;
}
ul.steps li li li li {
  width: 56px;
}