SASSリスト項目を変数名として使用

Question

現在、SASSリストをループし、その中の項目を使用してコード内の変数名と照合して、ループ内でこれらの変数を使用できるようにしますリスト文字列を使用してクラスを作成します。私は現時点で持っているもの

は

$sections: upcoming messages profile area report; 

@each $section in $sections { 
    .#{$section} { 
     h2 { color: $#{$section}; } 
     h2:after { background-color: $#{$section}; } 
    } 
} 

私の仮定は、私が「＃{}」内「$セクション」を使用することはできませんということです...これですが、それはケースがある場合私がしようとしていることを達成する正しい方法は何ですか？

Answer 1

次のソリューションは、サス3.3

//make sure the color variables are defined before calling the @each function 
$upcoming: green; 
$messages: yellow; 
$profile: red; 
$area: blue; 
$report: black; 


$sections: (upcoming: $upcoming, messages: $messages, profile: $profile, area: $area, report: $report); 

@each $section, $color in $sections { 
    .#{$section} { 
     h2 { color: $color } 
     h2:after { background-color: $color } 
    } 
} 

のために働く、あなたは次のCSS取得します：

.upcoming h2 { 
    color: green; 
} 

.upcoming h2:after { 
    background-color: green; 
} 

.messages h2 { 
    color: yellow; 
} 

.messages h2:after { 
    background-color: yellow; 
} 
... 

を