字符串操作在less / scss中？

Question

使用较少的功能是否可以将t r b l转换为t l b r？

.foo{
    border: fn(1px 2px 3px 4px)
}

Answer 1

以下是使用mixin的解决方案：

.border (@t, @l, @b, @r) {
    border-top:@t;
    border-left:@l;
    border-bottom:@b;
    border-right:@r;
}

.foo  {
    width:100px;
    height:100px;
    .border(2px, 1px, 3px, 4px);
}

这编译为：

.foo {
  width: 100px;
  height: 100px;
  border-top: 2px;
  border-left: 1px;
  border-bottom: 3px;
  border-right: 4px;
}

<强>更新

正如@ seven-phases-max所提出的，这是一个更有效的解决方案：

.border(@t, @l, @b, @r) {
    border: @t @r @b @l;
}

.foo  {
    .border(1px, 2px, 3px, 4px);
}

编译为：

.foo {
  border: 1px 4px 3px 2px;
}