CODEWITHSUNDEEP
sass
Arp
Arp

Reputation: 1088

How can I invert the order of the values of a $list in SASS

I am trying to invert the order of a given $list of values in SASS.

I want to apply this in order to invert shapes, specifically clip-path: polygon().

I have tried using @for $i from 1 to length($list) than tried to invert the order of each interaction:

$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
   

}

As I am new to SASS I am still getting used to the environment based on Ruby, as I come from a Javascript universe.

I would like the following result:

$l: 10% 20%, 30% 50% => 30% 50%, 10% 20% so I can apply this result to my shapes.

Thanks!

Upvotes: 0

Views: 281

Answers (1)

Arkellys
Arkellys

Reputation: 7801

As you supposed, what you can do is first creating a helper function that will reverse your list:

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

And then call it where you need:

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

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

Compiles as:

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

Upvotes: 1

Related Questions