// Generate a stepped gradient based on the hue difference between
// our desired colours. This gives us a list of values we send to
// the ‘box-shadow’ property of the element of our choice.

@function get-shadows(
  $initial-color, // Beginning colour
  $final-color, // Ending colour
  $step-width, // Step width
  $steps: 4 // Number of steps
) {

  // Find the average difference between steps. The initial colour
  // is the first step, so we need to divide by one fewer than
  // the number of steps.
  $hue-difference: (hue($initial-color) - hue($final-color)) / ($steps - 1);

  // List needs to be initialized outside the loop
  $shadow-list: ();

  // Generate rule for each step
  @for $i from 1 through $steps {

    // Initialize the var for what we’re going to do with our new difference
    $hue-adjustment: 0;

    // Subtract the difference if we’re going anti-clockwise on the
    // colour wheel, add it if not (CSS accepts negative values
    // for hue, which saves us from a bunch of gnarly math.) Again,
    // our first step is the initial colour; so we subtract one from
    // the index to make our first adjustment ‘zero’.
    @if $hue-difference > 0 {
      // Negate the difference to go backward
      $hue-adjustment: (abs($hue-difference) * ($i - 1)) * -1;
    } @else {
      // Add it to go forward
      $hue-adjustment: abs($hue-difference) * ($i - 1);
    }

    // Final colour for this step
    $color: adjust-hue($initial-color, $hue-adjustment);

    // We’re stacking shadows here, so we multiply the desired width
    // of the step by the current index to get the ‘spread’ value
    // for our rule
    $spread: $step-width * $i;

    // Generate the rule for this shadow
    $shadow: 0 0 0 $spread $color;

    // Append the rule to the list and add a comma if it’s not the last one
    @if $i != $steps {
      $shadow-list: append($shadow-list, $shadow, 'comma');
    } @else {
      $shadow-list: append($shadow-list, $shadow);
    }
  }

  // Return the finished list for ‘box-shadow’ to consume down there
  @return $shadow-list;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(198, 87%, 50%);
}

.sun {
  background-color: hsl(57, 100%, 50%);
  border-radius: 15vh;
  box-shadow: get-shadows(
    hsl(48, 100%, 50%),
    hsl(19, 100%, 50%),
    15vh
  );
  height: 30vh;
  margin: -9vh auto 0;
  width: 30vh;
}