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

Posted 2023-03-06

【中文标题】在 SCSS 的 for 循环中生成线性渐变

【英文标题】：Generate linear gradient in a for loop in SCSS

【发布时间】：2020-11-29 16:47:51

【问题描述】：

我已经编写了一个 mixin，利用linear-gradient 在任何位置创建具有任意大小和任意角度的 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)));

如果给定角度为-45deg，间隙为5px，宽度为10px，则会产生类似的效果：

但是，目前如果我想将行数增加一倍，我必须复制粘贴 linear-gradient 以使背景元素更大

有没有办法可以循环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

我什至不确定这是否可能，因为我认为您不能连接属性值，但我想我还是会问。

代码沙盒：https://codesandbox.io/s/nostalgic-diffie-yxzgo?file=/src/styles.scss

谢谢！

编辑 (12/08/20)： 结合 Temani Afif 和 Monzoor Tamal 的答案，我得到了预期的结果。这是一个对我有用的mixin，无需对任何宽度进行硬编码：

@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;
  

【问题讨论】：

你能在这里重新创建它吗？ codesandbox.io/s/blazing-dust-o5lxl?file=/src/styles.scss

更新了问题以包含沙盒链接

【参考方案1】：

我会使用不同的方法来完成此操作，如果没有 SASS，它会更容易处理。你只需要调整 CSS 变量来控制渐变：

.box 
  width:200px;
  height:200px;
  display:inline-block;
  background:pink;


.gradient 
  --n:3;
  --gap:15px;
  --width:20px;
  --color:red;

  position:relative;
  z-index:0;
  overflow:hidden;

.gradient::before 
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:calc(var(--n)*(var(--width) + var(--gap)));
  background:
    repeating-linear-gradient(90deg,
        transparent  0 var(--gap), 
        var(--color) 0 calc(var(--gap) + var(--width)));
  transform:skew(-45deg);
  transform-origin:top;

<div class="box gradient"></div>

<div class="box gradient" style="--n:5"></div>

<div class="box gradient" style="--n:2;--width:30px;--color:blue;"></div>

<div class="box gradient" style="--n:4;--gap:20px;--width:25px;--color:yellow;"></div>

【参考方案2】：

@mixin stripe($startColor, $endColor, $stripeAngel: -45, $stripeSize: 20px,  $contentWidth: 100px, $contentAngel: 135,) 
  background:
  linear-gradient(
    #$contentAngeldeg,
  rgba(255, 255, 255, 0.0) $contentWidth, 
  rgb(255, 255, 255)  0), 
    repeating-linear-gradient(
      #$stripeAngeldeg, 
      $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)

您只需要更改$contentWidth 的大小。如果有帮助，请告诉我。

sandbox