Возвращает значение правила css с градиентами из функции SASS

Question

У меня есть scss ниже, который генерирует пользовательский интерфейс как следующее изображение. Однако, как вы можете видеть, много кода является магическим числом, и я повторил, что я пытался использовать функцию 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

Да, вы можете создать миксин для генерации полос. 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 списки , @ для циклов , @ if rules .

Этот миксин генерирует этот код:

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>