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);
}

编辑：感谢七阶段 - 最大值，指出评论的改进。它现在是片段的一部分。

使这种LESS Mixin更高效，更少冗余？

1 个答案: