让这个 LESS Mixin 更高效、更少冗余？

Question

所以对于一个网站项目，我必须创建一个以前从未做过的 LESS Mixin。我有一种感觉，它没有达到应有的效率，而且可能有点多余。我浏览了它，但想不出更好的方法来做到这一点。也许你能给我一些建议？不要误会我的意思，它工作得非常好，但正如我所提到的，当涉及到 LESS 代码时，我想我可以做得更容易一些。

原来是这样：

http://jsfiddle.net/T2Xe9/747/

示例 HTML：

<style media="screen">
  div {
    background: crimson;
    width: 200px;
    height: 100px;
    position: relative;
    float: left;
    margin-right: 20px;
  }
</style>
<div class="example-1"></div>
<div class="example-2"></div>
<div class="example-3"></div>
<div class="example-4"></div>

混入示例：

.clipping(@colorOne; @colorTwo; @width; @direction; @position; @side) {
  display: inline-block;
  width: @width;
  height: 20%;
  position: absolute;
  content: " ";

  & when (@direction = 'up') {
    background: linear-gradient(to top left, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);
  }

  & when (@direction = 'down') {
    background: linear-gradient(to top right, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);
  }

  & when (@position = top) {
    top: 0;
  }

  & when (@position = bottom) {
    bottom: 0;
  }

  & when (@side = 'left') {
    left: 0;
  }

  & when (@side = 'right') {
    right: 0;
  }
}

.clipping-single(@colorOne; @colorTwo; @direction; @position) {
  &:before {
    .clipping(@colorOne; @colorTwo; 100%; @direction; @position; 'left');
  }
}

.clipping-double(@colorOne; @colorTwo; @direction; @position) {
  & when (@direction = 'up') {
    &:before {
      .clipping(@colorOne; @colorTwo; 50%; 'up'; @position; 'left');
    }
    &:after {
      .clipping(@colorOne; @colorTwo; 50%; 'down'; @position; 'right');
    }
  }

  & when (@direction = 'down') {
    &:before {
      .clipping(@colorOne; @colorTwo; 50%; 'down'; @position; 'left');
    }
    &:after {
      .clipping(@colorOne; @colorTwo; 50%; 'up'; @position; 'right');
    }
  }
}

.example-1 {
  .clipping-double(crimson, #fff, 'up', top);
}

.example-2 {
  .clipping-double(#fff, crimson, 'down', bottom);
}

.example-3 {
  .clipping-single(#fff, crimson, 'down', bottom);
}

.example-4 {
  .clipping-single(crimson, #fff, 'up', top);
}

Answer 1

我有两个建议给你。两者都将减少冗余并生成与原始版本相同的 CSS。如果更高效意味着更少的SASS代码行，那么情况也是如此。

& when (@position = top) {
  top: 0;
}

& when (@position = bottom) {
  bottom: 0;
}

可以替换为

@{position}: 0;

@{side}: 0; 也一样，但您必须传递 left 而不是 'left' 作为参数。

第二个建议是重构您设置线性渐变的行。唯一的 变量 是方向，所以我将其设为 SASS 变量以避免其他线性梯度参数的冗余。

& when (@direction = 'up') {
  background: linear-gradient(to top left, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);
}

& when (@direction = 'down') {
  background: linear-gradient(to top right, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);
}

变成

.define-gradient-direction(@direction);
.define-gradient-direction('up') { @gradientDir: to top left; }
.define-gradient-direction('down') { @gradientDir: to top right; }
background: linear-gradient(@gradientDir, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);

完整代码

.clipping(@colorOne; @colorTwo; @width; @direction; @position; @side) {
  .define-gradient-direction(@direction);
  .define-gradient-direction('up') { @gradientDir: to top left; }
  .define-gradient-direction('down') { @gradientDir: to top right; }
  
  display: inline-block;
  width: @width;
  height: 20%;
  position: absolute;
  content: " ";
  background: linear-gradient(@gradientDir, @colorOne 0%, @colorOne 50%, @colorTwo 50%, @colorTwo 100%);
  
  @{position}: 0;
  @{side}: 0;
}

.clipping-single(@colorOne; @colorTwo; @direction; @position) {
  &:before {
    .clipping(@colorOne; @colorTwo; 100%; @direction; @position; left);
  }
}

.clipping-double(@colorOne; @colorTwo; @direction; @position) {
  & when (@direction = 'up') {
    &:before {
      .clipping(@colorOne; @colorTwo; 50%; 'up'; @position; left);
    }
    &:after {
      .clipping(@colorOne; @colorTwo; 50%; 'down'; @position; right);
    }
  }

  & when (@direction = 'down') {
    &:before {
      .clipping(@colorOne; @colorTwo; 50%; 'down'; @position; left);
    }
    &:after {
      .clipping(@colorOne; @colorTwo; 50%; 'up'; @position; right);
    }
  }
}

.example-1 {
  .clipping-double(crimson, #fff, 'up', top);
}

.example-2 {
  .clipping-double(#fff, crimson, 'down', bottom);
}

.example-3 {
  .clipping-single(#fff, crimson, 'down', bottom);
}

.example-4 {
  .clipping-single(crimson, #fff, 'up', top);
}

编辑：感谢 7-phases-max 指出 cmets 的改进。它现在是 sn-p 的一部分。