SASS: последний элемент в списке аргументов

Question

Я пытался создать mixin, который получает аргументы (это может быть список переменных), а затем после последнего элемента списка не выводится запятая. это Mixin до сих пор:

@mixin i-class($name...,$pua) { 
     @if type-of($name) == "list" { 
      @for $className from 1 through length($name) { 
       .#{$classIcon}.#{$className}:before, 
      } 
       { content: "\e#{$pua}";} 
      } 
     } 
     @else { 
      .#{$classPrefix}.#{$name}:before { 
      content: "\e#{$pua}"; 
      } 
     } 
    } 

это было бы желаемый результат, если один параметр передается следующим образом:

@include i-class(someIcon,"000"); 

.icon.someIcon:before { 
    content: "\e000"; 
} 

и если были приняты несколько аргументов (список), то выходной сигнал будет быть так:

@include i-class(someIcon,someIcon2,someIcon3,"001"); 

.icon.someIcon:before, .icon.someIcon2:before, .icon.someIcon3:before { 
    content: "\e001"; 
} 

я просто не знаю, что использовать, чтобы проверить, если это последний элемент в списке, а затем опустить запятую. помощь будет принята с благодарностью :)

Answer 1

Активный аргумент должен быть последним аргументом в mixin. Было бы проще воспользоваться списками, чтобы создать селектор, чем вручную вставить запятые себя:

@mixin i-class($pua, $name...) { 
    $selector:(); 

    @each $className in $name { 
     $selector: append($selector, unquote('.#{$classIcon}.#{$className}:before'), comma); 
    } 

    #{$selector} { 
     content: "\e#{$pua}"; 
    } 
} 

Answer 2

@ ответ cimmanon прекрасно работает, но если вы хотите, чтобы избежать дублирования, вы можете попробовать использовать заполнители. Как что:

$classPrefix: ".icon"; 
$i-class-stack:(); 

@mixin i-class($pua, $names...) { 
    // A stack is used to create a placeholder by `$pua`. 
    @if not index($i-class-stack, $pua) { 
    $i-class-stack: append($i-class-stack, $pua); 
    %i-class-#{$pua} { 
     content: "\e#{$pua}"; 
    } 
    } 
    @each $name in $names { 
    #{$classPrefix}.#{$name}:before { 
     @extend %i-class-#{$pua}; 
    } 
    } 
} 

// First call to the mixin to generate a rule with `content: "\e001"`. 
@include i-class("001", someIcon, someIcon2); 

// Do stuff 
.foobar { 
    background-color: blue; 
} 

// Another call to the i-class mixin, but with a new value. 
@include i-class("025", someIcon, someIcon2); 

// Now, we add some new selectors to the first CSS rule 
// (with `content: "\e001"`). 
@include i-class("001", someIcon3, someIcon4); 

Смотрите вывод:

.icon.someIcon:before, .icon.someIcon2:before, .icon.someIcon3:before, .icon.someIcon4:before { 
    content: "\e001"; 
} 

.foobar { 
    background-color: blue; 
} 

.icon.someIcon:before, .icon.someIcon2:before { 
    content: "\e025"; 
}