Stylus에서 함수 인수로 목록 전달

Question

Stylus 및 nib 확장을 사용하여 선형 그래디언트를 만들려고합니다. 내가 별도의 인수로 전달하면 모든 것이 잘 작동 :

background linear-gradient(90deg, #000 0%, #FFF 10%, #000 20%)

는 그러나, 나는 루프 내에서 내 그라데이션을 구축 할 필요가있다. 변수를 사용하고 더 많은 값을 추가하고 있습니다.

// pseudo-code 

grid = 90deg 

for percent in percents 
    push(grid, #000 percent) 

background linear-gradient(grid) 

현재 문제가 있습니다. 선형 그라디언트 믹스 인은 전체 목록이 하나의 인수라고 생각하지만 은 개별 색상 정지가 예상됩니다. Stylus에서 목록을 가져 와서 복수 인수로 함수 에 전달할 수 있습니까?

Answer 1

linear-gradient() 
    unquote('linear-gradient(' + join(', ', arguments) + ')') 

percents = 10% 20% 30% 

grid = 90deg 

for percent in percents 
    push(grid, #000 percent) 

body 
    background linear-gradient(grid) 

설정 설명

음, 기본적으로, 스타일러스에서 목록의 두 가지 유형이있다. 첫 번째 표현식은 쉼표가없는 목록 (예 : 1 2 3)이고 두 번째 목록은 쉼표 (예 : Helvetica, Arial, sans-serif)입니다. 두 번째 유형의 목록은 첫 번째 유형이지만 isList 내부 플래그 (쉼표가 컴파일 단계에 추가됨)가 있습니다.

함수의 인수는 첫 번째 형식의 목록입니다. 현재 목록을 쉼표없이 쉼표없이 목록으로 변환 할 수는 없습니다. 따라서 우리는 unquote과 join 내장 함수를 사용하여 문자 그대로 linear-gradient(<list of arguments with commas>)을 출력해야합니다.