css - less/scss 中的字符串操作？

Question

使用 less 函数是否可以将 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;
}