scss assoicated 배열을 가져 와서 변수와 클래스를 생성하고 싶습니다.

Question

이것은 주로 구문 질문입니다.이 작업을 수행 할 수 있지만 변수를 선언하고 변수를 선언하고 연결하는 가장 좋은 방법은 모르겠습니다. for 루프의 문자열 근본적으로 필자는이 맵을 사용하여 색상의 변수와 글꼴 색 및 배경색과 같은 스타일을 할당하는 클래스를 생성했습니다.

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600'); 
@for $i from 0 to length($color-collection) { 


//create a variable for each color name, e.g. $white: #FFFFFF; 
//create a class for each variable name with a style, e.g. .bg-color-white {background-color: $white;} 

} 

Answer 1

우선 @for 대신 @each을 사용해야합니다.

둘째 루프에서 필요한 두 개의 변수 만 얻을 수 있습니다. 첫 번째 변수는 키이고 두 번째 변수는 값입니다.

세 번째로 sass 보간을 사용하여 변수를 클래스 이름에 포함하고 선택기에서 값을 unqote 할 수 있습니다. 나는 이것을 위해 unqote($color-value)을 사용할 수도 있다고 생각합니다. 아니면 단순히 색상 값을 따옴표없이 배열에 쓸 수 있습니다.

아래 예를 참조하십시오.

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600'); 
@each $color-name, $color-value in $color-collection { 

    .bg-color-#{$color-name} { 
    background-color: #{$color-value}; 
    } 
//create a variable for each color name, e.g. $white: #FFFFFF; 
//create a class for each variable name with a style, e.g. .bg-color-white {background-color: $white;} 

} 

http://sassmeister.com/gist/e321b7e36ed0e74cd2ce

여기 libsass 사용하고 있기 때문에 나이가 말대꾸 구문과 함께 일하는 것이 몇 가지 코드입니다 :

$color-collection: ('white' '#FFFFFF'), ('black' '#000000'), ('goldenrod' '#F59600'); 
@each $color in $color-collection { 
    $color-name: nth($color, 1); 
    $color-value: nth($color, 2); 
    .bg-color-#{$color-name} { 
    background-color: #{$color-value}; 
    } 
} 

유망 보이는

http://sassmeister.com/gist/28caaf9d5e644d5db0cc