Multiple variables in SASS @each statement

Question

I'm trying pass along a couple parameters into a SASS statement to ultimately create variations on rows, and I'm not quite getting the map key correct.

My goal is to get RowName, RowBGColor and RowText Color, along with passing some of the settings into an additional mixin that I"m using elsewhere in my SASS.

@mixin sectionH1 ($color) {
font-size: 60px;
text-transform: uppercase;
color: $color;
margin: 0 0 0 0;
&:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 30%;
    border-bottom: 3px dotted;
    }
}
$primary-names:(#ccc, #000, #fff, #ccc);
//$primary-names:(Red, Black, Grey, White);
$primary-bgColors: (#8f1324, #000, #999, #fff);
$primary-txtColors: ( #fff, #fff, #000, #000);

//@for $i from 1 through length($primary-bgColors){
@each $name, $bgColor, $txtColor in $primary-names, $primary-bgColors, 
$primary-txtColors {
.titleRow#{$name} {
    text-align: center;
    height: auto;
    overflow: hidden;
    //background-color: nth($color in $primary-bgColors, $i);
    background-color: $bgColor;
    .content {
        bottom: 0;
        width: 100%;
        color: $txtColor;
        padding: 0 30px 25px;
        h1 {
            @include sectionH1 ($txtColor);
            font-size: 60px;
        }
        .subtitle {
            line-height: 30px;
            padding: 15px 0 0 0;
        }
    }
    .fa {
        font-size: 30px;
        color: #fff;
        left: 50%;
        margin: 18px 0 0 0;
    }
  }
}
//}

score 0 · Accepted Answer · answered Aug 07 '18 at 21:32

Got it sorted out, my gut tells me there's a more efficient way, but here tis.

$rowTypes: (red #8f1324 #fff) (black #8f1324 #fff) (grey #ccc #000) (white #fff #000);

 @each $row in $rowTypes {
   $names: nth($row, 1);
   $bgColor: nth($row, 2);
   $txtColor: nth($row, 3);

.titleRow#{$names} {
    text-align: center;
    height: auto;
    overflow: hidden;
    background-color: $bgColor;
    .content {
        bottom: 0;
        width: 100%;
        color: $txtColor;
        padding: 0 30px 25px;
        h1 {
            @include sectionH1 ($txtColor);
            font-size: 60px;
        }
        .subtitle {
            line-height: 30px;
            padding: 15px 0 0 0;
        }
    }
    .fa {
        font-size: 30px;
        color: #fff;
        left: 50%;
        margin: 18px 0 0 0;
    }
  }
}

Multiple variables in SASS @each statement

1 Answers1