Как я могу изменить порядок значений в списке $ в SASS

Question

Я пытаюсь инвертировать порядок заданных $list значений в SASS.

Я хочу применить это, чтобы инвертировать shapes, в частности clip-path: polygon().

Я пробовал использовать @for $i from 1 to length($list), чем пытался инвертировать порядок каждого взаимодействия:

$l: 10% 20%, 30% 40%;

@for $i from 1 through length($l) {
  
  //I tried using the index somehow to invert the order with nth($l, $i) with no success
   

}

Поскольку я новичок в SASS, я все еще привыкаю к ​​среде, основанной на Ruby, поскольку Я пришел из вселенной Javascript.

Мне нужен следующий результат:

$l: 10% 20%, 30% 50% => 30% 50%, 10% 20%, чтобы я мог применить этот результат к моему shapes.

Спасибо!

Answer 1

Как вы и предполагали, вы можете сначала создать вспомогательную функцию, которая перевернет ваш список:

@function reverseList($list, $separator:comma) {
  $reversedList: null;
  
  @for $i from length($l) to 0 {
    $reversedList: append($reversedList, nth($l, $i), $separator);
  }
  
  @return $reversedList;
}

А затем вызвать ее там, где вам нужно:

$l: 10% 0%, 30% 20%, 45% 19%, 70% 100%;

.background {
  clip-path: polygon(reverseList($l));
}

Компилирует как:

.background {
  clip-path: polygon(70% 100%, 45% 19%, 30% 20%, 10% 0%);
}