SCSS 連想配列的

//配列作る
$colors:(
 green:(1:#11945F,2:#33A76E,3:#51B484),
 blue:(1:#3491C1,2:#54A0CA,3:#6EAED2),
);

//★使う

@each $key,$color in $colors{

 //$keyにgreen,blueが入る
 .#{$key}{
   
   //map-getを使用して$color,の1番目を指定する
   .contentsTitle {
     color: map-get($color, 1);
     border-bottom: 2px solid map-get($color, 1);
   }//.contentsTitle
   
 }//green,blue,orange
}

CSS

.green .contentsTitle {
 color: #11945F;
 border-bottom: 2px solid #11945F; }


.blue .contentsTitle {
 color: #3491C1;
 border-bottom: 2px solid #3491C1; }


この記事が気に入ったらサポートをしてみませんか?