css - 如何通过使用不同的参数来改变更少的属性？

Question

我经常用less similarity ，例如:

.position{
  position:absolute;
  right:10px;
  top:20px;
}

所以我想使用一个mixin:

.position(@absolute:absolute;@top:0;@right:0;@bottom:0;@left:0){
    position: @absolute;
    top:@top;
    right: @right;
    bottom:@bottom;
    left:@left;
}

但有时我不需要right，但函数总是将right注入(inject)到我的代码中。

那么如果我想要下面的代码我应该怎么做:

.position(@absolute:absolute;@top:12px;@left:12px;@bottom:12px);
//without 'right'
.position{
    position: absolute;
    top:12px;
    bottom:12px;
    left:12px;
}

谢谢!

Answer 1

你可以像这样重写你的mixin(它没有任何必需的参数):

.position(
  @position: absolute;
  @top: false;
  @right: false;
  @bottom: false;
  @left: false
){
  position: @position;

  & when not (@top = false) {
    top: @top;
  }

  & when not (@right = false) {
    right: @right;
  }

  & when not (@bottom = false) {
    bottom: @bottom;
  }

  & when not (@left = false) {
    left: @left;
  }
}

现在你可以只设置你真正需要的那些参数:

a {
  .position(
    @top: 20px, 
    @left: 0px
  );
}

b {
  .position(
    @bottom: -50px, 
    @right: 0
  );
}

CSS 输出:

a {
  position: absolute;
  top: 20px;
  left: 0px;
}
b {
  position: absolute;
  right: 0;
  bottom: -50px;
}