从 SASS 函数返回带有渐变的 css 规则值

Question

我在下面有 scss，它会生成如下图所示的 UI。但是，正如您所看到的，很多代码都是幻数并且重复我试图使用 sass 函数来提出函数来获取 css 规则值。

但是我意识到使用 SCSS 函数只能完成简单的数字计算，并且返回复杂的规则值可能具有挑战性。我想知道是否有任何方法可以获得所需的结果

// Current Code
    $light: white;
    $dark: gray;
    div {
      height: 400px;
      width: 100px;
      background: linear-gradient(to bottom,
          $light, $light 90px,

          $dark 90px, $dark 102px,
          $light 102px, $light 105px,

          $dark 105px, $dark 117px,
          $light 117px, $light 120px,

          $dark 120px, $dark 132px,
          $light 132px, $light 135px,

          $light 100%
        )

    }

    // What I am trying to achieve
        @function get-line-skeleton($height-of-bar, $verticle-spacing, $start-at)
    {
       // code to return value of rule with series of auto generated gradient
    }
        $light: white;
        $dark: gray;
        div {
          height: 400px;
          width: 100px;
          background: @get-line-skeleton(12, 3, 90)      
        }

Answer 1

是的，您可以创建一个 mixin 来生成条纹。 Sassmeister demo.

@mixin linear-gradient($stripe-size, $stripe-color, $gutter-size, $gutter-color, $count) {

  $stripes: null; // it's like array

  @for $i from 1 through $count {
    $start-position: ($stripe-size + $gutter-size) * ($i - 1);
    $end-posotion: $start-position + $stripe-size;

    $stripe: $stripe-color $start-position, $stripe-color $end-posotion;
    $stripes: append($stripes, $stripe, comma); // `push` gradient step to `array`

    @if ($i != $count) {
      // don't apply gutter after last stripe 
      $gutter: $gutter-color $end-posotion,   $gutter-color $end-posotion + $gutter-size;
      $stripes: append($stripes, $gutter, comma);
    }
  }

  background: linear-gradient(to bottom, $stripes);
}

div {
  @include linear-gradient(10px, red, 5px, green, 3);
}

有趣的是：@mixins，sass lists，@for loops，@if rules。

此 mixin 生成以下代码：

div {
  height: 40px; /* not from mixin */
  background: linear-gradient(to bottom, red 0px, red 10px, green 10px, green 15px, red 15px, red 25px, green 25px, green 30px, red 30px, red 40px);
}

<div></div>