文章/答案/技术大牛

发布

社区首页 >问答首页 >让这更少的米辛更有效率和更少的冗余？

问让这更少的米辛更有效率和更少的冗余？
EN

Stack Overflow用户

提问于 2017-04-05 06:11:39

回答 1查看 76关注 0票数 1

因此，对于一个网站项目，我必须创建一个更少的米欣，这是我以前从未做过的。我觉得它不够有效，而且可能有些多余。我仔细看了看，却想不出更好的办法。也许你能给我点建议？不要误解我，它的工作非常好，但正如前面提到的，我想当涉及到较少的代码时，我可以做得更容易一些。

所以这里是：

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

coding-efficiency

less

mixins

redundancy

less-mixins

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-05 16:19:50

我有两个建议给你。这两种方法都将减少冗余，并产生与原始版本相同的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);
}

编辑:感谢七阶段-最大的指出改进意见。现在是片段的一部分了。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43223152

复制

相似问题

问让这更少的米辛更有效率和更少的冗余？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让这更少的米辛更有效率和更少的冗余？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让这更少的米辛更有效率和更少的冗余？
EN