在SCSS中的for循环中生成线性渐变

我已经编写了一个mixin，通过利用

线性渐变

为背景创建了4条任意大小、任意角度的并排线条，但是我想知道是否有办法使其更具动态性

@mixin corner-lines($start, $gap, $width, $angle, $colour) {
  background:
    linear-gradient($angle,
    #0000   $start,
    #0000   calc(#{$start} + #{$gap}),
    $colour calc(#{$start} + #{$gap}),
    $colour calc(#{$start} + (#{$gap} * 2)  + #{$width}),
    #0000   calc(#{$start} + (#{$gap} * 2)  + #{$width}),
    #0000   calc(#{$start} + (#{$gap} * 3)  + #{$width})),
    linear-gradient($angle,
    #0000   calc(#{$start} + (#{$gap} * 4)  + #{$width}),
    #0000   calc(#{$start} + (#{$gap} * 5)  + #{$width}),
    $colour calc(#{$start} + (#{$gap} * 5)  + #{$width}),
    $colour calc(#{$start} + (#{$gap} * 6)  + (#{$width} * 2)),
    #0000   calc(#{$start} + (#{$gap} * 6)  + (#{$width} * 2)),
    #0000   calc(#{$start} + (#{$gap} * 7)  + (#{$width} * 2))),
    linear-gradient($angle,
    #0000   calc(#{$start} + (#{$gap} * 8)  + (#{$width} * 2)),
    #0000   calc(#{$start} + (#{$gap} * 9)  + (#{$width} * 2)),
    $colour calc(#{$start} + (#{$gap} * 9)  + (#{$width} * 2)),
    $colour calc(#{$start} + (#{$gap} * 10) + (#{$width} * 3)),
    #0000   calc(#{$start} + (#{$gap} * 10) + (#{$width} * 3)),
    #0000   calc(#{$start} + (#{$gap} * 11) + (#{$width} * 3))),
    linear-gradient($angle,
    #0000   calc(#{$start} + (#{$gap} * 12) + (#{$width} * 3)),
    #0000   calc(#{$start} + (#{$gap} * 13) + (#{$width} * 3)),
    $colour calc(#{$start} + (#{$gap} * 13) + (#{$width} * 3)),
    $colour calc(#{$start} + (#{$gap} * 14) + (#{$width} * 4)),
    #0000   calc(#{$start} + (#{$gap} * 14) + (#{$width} * 4)),
    #0000   calc(#{$start} + (#{$gap} * 15) + (#{$width} * 4)));
}

如果给定的角度为

-45度

，间隙为

5px

，宽度为

10px

，则会产生类似的情况：

但是，目前如果我想将行数增加一倍，我必须复制粘贴

线性渐变

，以使背景元素更大

有没有一种方法可以循环

n次

并生成这个长的线性梯度

如果我循环，我会使用这样的东西，这个例子不起作用，但它将是我的方法：

$my-var: "someValue";
@while $i <= (#{$steps} * 4) {
    $my-var: $my-var + linear-gradient($angle,
    #0000   calc(#{$start} + (#{$gap} * #{$i})  + (#{$width} * $i)),
    #0000   calc(#{$start} + (#{$gap} * (#{$i} + 1))  + (#{$width} * #{$i})),
    $colour calc(#{$start} + (#{$gap} * (#{$i} + 1))  + (#{$width} * #{$i})),
    $colour calc(#{$start} + (#{$gap} * (#{$i} + 2)) + (#{$width} * (#{$i} + 1))),
    #0000   calc(#{$start} + (#{$gap} * (#{$i} + 2)) + (#{$width} * (#{$i} + 1))),
    #0000   calc(#{$start} + (#{$gap} * (#{$i} + 3)) + (#{$width} * (#{$i} + 1))));

    $i: $i + 4
}

---

我会用一种不同的方法来做这件事，在没有SASS的情况下更容易处理。您只需调整CSS变量即可控制渐变：

.box{
宽度：200px；
高度：200px；
显示：内联块；
背景：粉红色；
}
.梯度{
--n:3；
--间隙：15px；
--宽度：20px；
--颜色：红色；
位置：相对位置；
z指数：0；
溢出：隐藏；
}
.梯度：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：计算值（var（--n）*（var（--width）+var（--gap））；
背景：
重复线性梯度（90度，
透明0 var（--间隙），
var（--颜色）0计算（var（--间隙）+var（--宽度））；
变换：倾斜（-45度）；
变换原点：顶部；
}

您只需更改

$contentWidth

大小。如果有帮助，请告诉我

---

您能在这里重新创建它吗。已更新问题以包含沙盒链接

@mixin corner-lines($gap, $width, $n, $color) {
  position: relative;

  &::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(#{$n} * (#{$width} + #{$gap}));
    background:
      repeating-linear-gradient(90deg,
      transparent  0 #{$gap},
      #{$color} 0 calc(#{$gap} + #{$width}));
    content: '';
    transform: skew(-45deg);
    transform-origin: top;
  }
}

@mixin stripe($startColor, $endColor, $stripeAngel: -45, $stripeSize: 20px,  $contentWidth: 100px, $contentAngel: 135,) {
  background:
  linear-gradient(
    #{$contentAngel}deg,
  rgba(255, 255, 255, 0.0) $contentWidth, 
  rgb(255, 255, 255)  0), 
    repeating-linear-gradient(
      #{$stripeAngel}deg, 
      $startColor,
      $startColor $stripeSize,
      $endColor $stripeSize,
      $endColor  $stripeSize * 2);
}
.tt {
  height: 100vh;
  padding: 5em;
  // @include corner-lines(90%, 5px, 10px, -45deg, red)

  @include stripe(red, #ffffff, -45, 20px, 100px, 135)
}