Sass 여러 변수가있는 각각의 코드

Question

나는 Sass와 Compass를 시작하고 있는데, 나는 그것을 좋아하고있다. 내가하고자하는 것은 @each 기능을 이용하여 반복적 인 작업을 단순화하는 것입니다. 그러나 하나의 변수를 삽입하는 예는 @each이고 여러 변수를 사용할 수 있기를 바랍니다.

합니다 (Sass Reference에서) 표준 방법 :

@each {$animal $color} in {puma black}, {sea-slug green}, {egret brown}, {salamander red} { 
    .#{$animal}-icon { 
    background-color: #{$color}; 
    } 
} 

이게 가능 : 대단한

@each $animal in puma, sea-slug, egret, salamander { 
    .#{$animal}-icon { 
    background-image: url('/images/#{$animal}.png'); 
    } 
} 

하지만, 내가 좋아하는 뭔가를 할 수 있도록하고 싶습니다?

Answer 1

나는 같은 보트 (초/나침반)로 비슷한 것을해야했다. 여기에 중첩 된 목록을 사용하여, 내가 생각 해낸 무엇 :

$flash_types: (success #d4ffd4) (error #ffd5d1); 

@each $flash_def in $flash_types { 
    $type: nth($flash_def, 1); 
    $colour: nth($flash_def, 2); 

    &.#{$type} { 
     background-color: $colour; 
     background-image: url(../images/#{$type}.png); 
    } 
} 

그것은 아니에요 가장 우아한 해결책하지만 당신은 아무 것도 찾을 수없는 경우가 작동합니다. 희망이 도움이됩니다! 나도 더 나은 방법을 주시면 감사하겠습니다 :)

Answer 2

방금이 문제가 발생했습니다. 말대꾸, 당신은 실제로 다차원 목록을 가질 수 있도록하는 대신 개별 변수를 구성, 당신은 그들에 다음 루프, 그들 모두를 유지하는 하나 개의 변수를 만들 것입니다 : 당신은 당신이 것 같은 다차원 목록을 가질 수

$zoo: puma black, sea-slug green, egret brown, salamander red; 

@each $animal in $zoo { 
    .#{nth($animal, 1)}-icon { 
    background-color: nth($animal, 2); 
    } 
} 

각각의 중첩 된 차원이 다른 방식 (예 : 쉼표 및 공백)으로 분리되어있는 한 단일 차원 목록이 있어야합니다.

UPDATE 년 10 월 24 일 말대꾸 3.3에서 2013

, 라는 새로운 데이터 유형이 항목의 해시 세트입니다 매핑입니다. 사람이 그것을 필요로하는 경우가 SassMeister

Answer 3

에서 이상 행동에 내가 사용하는 또 다른 방법이 볼 수

$zoo: ("puma": black, "sea-slug": green, "egret": brown, "salamander": red); 

@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

: 이와 함께, 우리는 닮은 훨씬 더 밀접에 다음과 같은 방법으로 원하는 결과를 내 이전의 대답을 다시 작성할 수 있습니다 :

$i:0; 
@each $name in facebook, twitter, google_plus, instagram, youtube, pinterest { 
    $i:$i+1; 
} 

Answer 4

이 기능은 Sass 3.3.0 이상에서 지원됩니다 (이 기능을 사용하려면 3.2.14에서 3.4.4로 업데이트했습니다). 당신이 말대꾸를 업데이트하는 경우

@each $animal, $color in (puma, black), (sea-slug, green), (egret, brown), (salamander, red) { 
    .#{$animal}-icon { 
    background-color: $color; 
    } 
} 

나는, 이전 버전과의 호환성을 위해 check the changelog에 권하고 싶습니다.

Sass reference for multiple assignments with @each

Answer 5

또 다른 해결책은 다른 목록과 "우편"을 만들 수 있습니다.

//Create lists 
$animals: puma, sea-slug, egret, salamander; 
$animals-color: black, green, brown, red; 

//Zip lists 
$zoo: zip($animals, $animals-color); 

//Do cycle 
@each $animal, $color in $zoo { 
    .#{$animal}-icon { 
     background-color: $color; 
    } 
} 

아마이 솔루션은 다른 것보다 더 복잡 할 수도 있지만, 한 번 이상 목록을 사용하면 시간을 절약 할 수 있습니다. (내 경우였습니다)