LESS & FuelUX树-更改步骤列表的宽度

Question

我不确定这是一个小问题还是FuelUX问题，但我会把它作为两者都发出来。

我尝试根据有多少子元素具有class="complete"来更改ul.steps元素的宽度。

这可以用LESS实现吗?或者我需要做一些自定义的jQuery吗？

当前的宽度是224px，我想为每个存在的类减少56px。

Answer 1

在CSS编译完成后，预处理器越少也没有任何帮助，因为它在加载页面之前被编译。

您需要知道页面上的$('.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;
}