스타일을 결합한 Sass/scss 다중 믹스

Question

나는 그라데이션 배경을 설정하기 위해 (잘, 정말로 몇 가지) Sass 믹스 인을 가지고 있습니다 (이전 버전과의 호환성 있음). 이제, 하나 이상의 그라디언트를 적용하고자하는 요소가 있습니다. 쉼표로 구분 된 목록으로 배경 속성을 설정하여이 작업을 직접 수행 할 수 있지만 여러 그라디언트를 적용하고 속성을 공통 구분 목록으로 출력하기 위해 그라디언트 믹스의 여러 응용 프로그램을 사용할 수 있으면 좋겠습니다.

내가하고 싶은 무엇의 예 : (기본적으로)이

div.needs-two-backgrounds { 
    background-image: linear-gradient(90deg, $color-one 0, $color-two 100%), 
        linear-gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%); 
} 

을 방출 할

div.needs-two-backgrounds { 
    @include gradient-mixin(90deg, $color-one 0, $color-two 100%); 
    @include gradient-mixin(180deg, $color-three 0, $color-four 20%, $color-five 100%); 
} 

이가 말대꾸에 내장 할 수있는 방법이 있습니까, 아니면 것 별도의 라이브러리가 필요합니까, 아니면 언어로만 불가능합니까?

편집 : 답마다 해결책을 세웠는데 공유하고 싶다고 생각했습니다. 이 질문에 제안하는 방법을 같이 사용

@function linear-gradient-x($direction, $stops...) { 
    @return linear-gradient($direction, $stops); 
} 

@function prefixed-background-image-list-x($prefix, $images) { 
    $ret-val:(); 

    @each $image in $images { 
    $prefixed-image: #{$prefix}$image; 
    $ret-val: append($ret-val, $prefixed-image, 'comma'); 
    } 

    @return $ret-val; 
} 

@mixin background-image-x($backgrounds...) { 
    background-image: prefixed-background-image-list-x("-moz-", $backgrounds); 
    background-image: prefixed-background-image-list-x("-webkit-", $backgrounds); 
    background-image: prefixed-background-image-list-x("-o-", $backgrounds); 
    background-image: prefixed-background-image-list-x("ms-", $backgrounds); 
    background-image: prefixed-background-image-list-x("", $backgrounds); 
} 

:이 사람을 도움이

div.needs-two-backgrounds { 
    @include background-image-x(
    linear-gradient-x(90deg, $color-one 0, $color-two 100%), 
    linear-gradient-x(180deg, $color-three 0, $color-four 20%, $color-five 100%) 
); 
} 

희망.

Answer 1

당신이 설명하는 방법으로 불가능하지만, 이와 같은 것으로도 가능합니다.

div.needs-two-backgrounds { 
    @include background-image(
     gradient(90deg, $color-one 0, $color-two 100%), 
     gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%) 
    ); 
} 

그런 변수 인수를 지원하는 믹스 인 background-image을 만들어야 할 것입니다 - 세 가지 점에주의하십시오 gradient-mixin은 다음과/확장 교체해야합니다

@mixin background-image($images...) { 
    // do stuff here 
} 

gradient 기능. 이 모든 할 수있는 방법에 대한 좋은 출발점이 나침반 프로젝트의 background-image 믹스 인입니다 :

https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_images.scss#L97