SASS @each 语句中的多个变量答案

【问题标题】：Multiple variables in SASS @each statementSASS @each 语句中的多个变量
【发布时间】：2018-12-12 06:12:27
【问题描述】：

我正在尝试将几个参数传递到 SASS 语句中，以最终在行上创建变体，但我并没有完全正确地获取映射键。

我的目标是获取 RowName、RowBGColor 和 RowText Color，同时将一些设置传递给我在 SASS 其他地方使用的附加 mixin。

@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;
    }
  }
}
//}

【问题讨论】：

标签： sass scss-mixins

【解决方案1】：

解决了，我的直觉告诉我有一个更有效的方法，但这里是。

$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;
    }
  }
}

【讨论】：