Создание Радужной Границы с Sass

Теперь вернемся к нашей функции. Самый простой случай, безусловно, тот, где все цвета имеют одинаковую ширину. Чтобы определить эту ширину, все, что нам нужно сделать, это разделить 100% Затем мы перебираем список и строим чистый список для функции градиента.

 @function _stripes-equal-stops($colors) {
  $gradients: ();                                                        // 1
  $stops: 100% / length($colors);                                        // 2

  @for $i from 1 to length($colors) {                                    // 3
    $gradients: append($gradients, nth($colors, $i) $i * $stops, comma); // 4
    @if $i < length($colors) {                                        // 5
      $gradients: append($gradients, nth($colors, $i + 1) $i * $stops);  // 6
    }
  }

  @return $gradients;                                                    // 7
}

Это может выглядеть сложно, но на самом деле это очень просто. Вот что он делает:

1. Создайте пустой список для наших цветов и цветовых остановок.
2. Определите ширину цвета в процентах.
3. Перебрать цвета.
4. Добавьте цвет ( nth($colors, $i)$i * $stops$gradients
5. Если в списке остался цвет, добавьте его так же, как мы это сделали.
6. Наконец, верните список.

Например, рассмотрите список $colorsred, yellow, green Результат, возвращаемый функцией, будет red 33.33%, yellow 33.33%, yellow 66.66%, green 66.66%

Пользовательские Цветовые Остановки

Мы также можем принять двухмерный список цветов и цветовых остановок. Что-то вроде red 10%, blue 20%, green 60% Это означает, что красный цвет должен занимать 10% от общей ширины, синий — от 10% до 20%, а зеленый — от 20% до конца. Действительно, последняя остановка цвета не анализируется.

 @function _stripes-custom-stops($colors) {
  $gradients: ();

  @for $i from 1 to length($colors) {
    @if length(nth($colors, $i)) > 1 {
      $color: nth(nth($colors, $i), 1);
      $stop:  nth(nth($colors, $i), 2);

      $gradients: append($gradients, $color $stop, comma);
      @if $i < length($colors) {
        $gradients: append($gradients, nth(nth($colors, $i + 1), 1) $stop);
      }
    }

    @else {
      @warn '`#{nth($colors, $i)}` skipped because it is only one item long while it should be 2: (color, color-stop).';
    }
  }

  @return $gradients;
}

Код почти такой же, как в предыдущей функции, за исключением того, что вместо вычисления цветовой остановки мы читаем его из второго элемента индекса текущего цикла. Если для цвета не определена остановка цвета, мы предупреждаем пользователя, что цвет пропускается.

Случайные цветовые остановки

Наконец, мы можем случайным образом генерировать наши цветовые остановки. Возможно, вы заметили, что в примере Treehouse цвета не одинаковой ширины; некоторые короче, некоторые длиннее. Если мы хотим добиться подобного эффекта, мы могли бы вычислить цветовые остановки с помощью случайной функции.

Сначала я позволил судьбе решить, что цвета прекратятся, однако я очень часто сталкивался с массивным цветом, занимающим 90% ширины, а все остальные цвета изо всех сил пытались вписаться в оставшееся пространство. Это отстой! То, что я хотел, было цветами почти равного размера с небольшим изменением длины.

 @function _stripes-random-stops($colors) {
  @if length(nth($colors, 1)) > 1 {
    @return _stripes-custom-stops($colors);
  }

  $nb: length($colors);
  $gradients: ();
  $variation: 10;
  $median: 100 / $n;

  @for $i from 1 to $nb {
    $stop: $median * $i; 
    $random: rand($stop - $variation, $stop + $variation) * 1%;
    $gradients: append($gradients, nth($colors, $i) $random, comma);
    @if $i < length($colors) {
      $gradients: append($gradients, nth(nth($colors, $i + 1), 1) $random);
    } 
  }

  @return $gradients;
}

Практически тот же код, что и раньше. Но обратите внимание, как мы генерируем случайное число между n - 10%n + 10%n Это гарантирует, что все цветовые сечения будут примерно одинаковой ширины, не будучи строго одинаковыми, что приведет к аккуратному небольшому эффекту случайных размеров цветов.

И случайная функция в Sass 3.3, и пользовательская функция Ruby из CodePen принимают только один аргумент: максимальное значение для перехода между 1 и заданным значением. Поэтому, если мы хотим, чтобы функция генерировала случайные minmax

 @function rand($min, $max) {
  @return random($max - $min) + $min;
}

Заключительные слова + Демо

Таким образом, у вас есть чистая и лаконичная функция для создания разноцветной рамки из списка цветов. Как видите, код не так сложен для понимания и, в конце концов, хорошо организован. API довольно прост в использовании, так что я думаю, что мы его прибили!

Вы можете играть с кодом на CodePen: