Как получить доступ к двойной карте с помощью Sass?

Question

Я хотел бы отобразить CSS ниже, но у меня возникли проблемы с прохождением этого моего двойного массива.

Как мне получить доступ как к первому, так и ко второму массиву и создатьэлемент, равный приведенному ниже?

Проблема, с которой я сталкиваюсь, заключается в том, что я могу получить доступ к первой карте, но вторая карта, которая находится внутри первой в @debug, появляется как "встроенная" ..

@mixin generate-table-nth($page-name) {
    @if $page-name == 'indicators-page' {
        $table-list: (
            table-contract-details:       ('SHOPPING:', 'NOME FANTASIA (ATUAL):', 'CÓD. CONTRATO:', 'DATA ASSINATURA CONTRATO:', 'DATA INAUGURAÇÃO:', 'DATA INÍCIO CONTRATO:', 'DATA FIM CONTRATO:', 'PRAZO CONTRATO:', 'ATIVIDADE:'),
            table-contract-rent:          ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'DATA INÍCIO ALUG. CONTRATUAL:', 'DATA FIM ALUG. CONTRATUAL:', 'ALUGUEL CONTRATUAL:', 'DATA RENEGOCIAÇÃO:'),
            table-percent-rent:           ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'TIPO PRODUTO:', 'DATA INÍCIO ALUGUEL %:', 'DATA FIM ALUGUEL %:', 'VOLUME VENDA:', '% VENDA:', 'OBSERVAÇÃO:'),
            table-minimum-rent-reduction: ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'DATA INÍCIO:', 'DATA FIM:', 'VALOR:', 'TIPO REDUÇÃO:')
        );

        @each $table-key, $nth-key in $table-list {
            $table-name: $table-key;




            @debug  $table-key;
            /*&[data-element-name=#{$table-name}] {
                &:nth-of-type(1):before { content: $nth-name };
            }*/
        }
    }
}

Вывод должен быть таким:

&[data-element-name="table-contract-details"] {
            tbody {
                tr {
                    td {
                        &:nth-of-type(1):before { content: "SHOPPING:";                 }
                        &:nth-of-type(2):before { content: "NOME FANTASIA (ATUAL):";    }
                        &:nth-of-type(3):before { content: "CÓD. CONTRATO:";            }
                        &:nth-of-type(4):before { content: "DATA ASSINATURA CONTRATO:"; }
                        &:nth-of-type(5):before { content: "DATA CADASTRO CONTRATO:";   }
                        &:nth-of-type(6):before { content: "DATA INAUGURAÇÃO:";         }
                        &:nth-of-type(7):before { content: "DATA INÍCIO CONTRATO:";     }
                        &:nth-of-type(8):before { content: "DATA FIM CONTRATO:";        }
                        &:nth-of-type(9):before { content: "PRAZO CONTRATO:";           }
                        &:nth-of-type(10):before { content: "ATIVIDADE:";               }
                    }
                }
            }
        }

        &[data-element-name="table-contract-rent"] {
            tbody {
                tr {
                    td {
                        &:nth-of-type(1):before { content: "SHOPPING:";                     }
                        &:nth-of-type(2):before { content: "CÓD. CONTRATO:";                }
                        &:nth-of-type(3):before { content: "NOME FANTASIA (ATUAL):";        }
                        &:nth-of-type(4):before { content: "DATA INÍCIO ALUG. CONTRATUAL:"; }
                        &:nth-of-type(5):before { content: "DATA FIM ALUG. CONTRATUAL:";    }
                        &:nth-of-type(6):before { content: "ALUGUEL CONTRATUAL:";           }
                        &:nth-of-type(7):before { content: "DATA RENEGOCIAÇÃO:";            }
                    }
                }
            }
        }

        &[data-element-name="table-percent-rent"] {
            tbody {
                tr {
                    td {
                        &:nth-of-type(1):before { content: "SHOPPING:";               }
                        &:nth-of-type(2):before { content: "CÓD. CONTRATO:";          }
                        &:nth-of-type(3):before { content: "NOME FANTASIA (ATUAL):";  }
                        &:nth-of-type(4):before { content: "TIPO PRODUTO:";           }
                        &:nth-of-type(5):before { content: "DATA INÍCIO ALUGUEL %:";  }
                        &:nth-of-type(6):before { content: "DATA FIM ALUGUEL %:";     }
                        &:nth-of-type(7):before { content: "VOLUME VENDA:";           }
                        &:nth-of-type(8):before { content: "% VENDA:";                }
                    }
                }
            }
        }

        &[data-element-name="table-minimum-rent-reduction"] {
            tbody {
                tr {
                    td {

                        &:nth-of-type(1):before { content: "SHOPPING:";               }
                        &:nth-of-type(2):before { content: "CÓD. CONTRATO:";          }
                        &:nth-of-type(3):before { content: "NOME FANTASIA (ATUAL):";  }
                        &:nth-of-type(4):before { content: "DATA INÍCIO:";            }
                        &:nth-of-type(5):before { content: "DATA FIM:";               }
                        &:nth-of-type(6):before { content: "VALOR:";                  }
                        &:nth-of-type(7):before { content: "TIPO REDUÇÃO:";           }
                        &:nth-of-type(8):before { content: "OBSERVAÇÃO:";             }
                    }
                }
            }

Answer 1

У вас есть карта с вложенными списками , а не картами.

Таким образом, вы можете создать цикл для этих списков с @each, получая индекс для каждого цикла:

@each $item in $nth-key {
    $index: index($nth-key, $item); // => get the item's number at every loop
    &:nth-of-type(#{$index}):before { content: $item;}
}

Это полный код

@mixin generate-table-nth($page-name) {
    @if $page-name == 'indicators-page' {

      $table-list: (
        table-contract-details:       ('SHOPPING:', 'NOME FANTASIA (ATUAL):', 'CÓD. CONTRATO:', 'DATA ASSINATURA CONTRATO:', 'DATA INAUGURAÇÃO:', 'DATA INÍCIO CONTRATO:', 'DATA FIM CONTRATO:', 'PRAZO CONTRATO:', 'ATIVIDADE:'),
        table-contract-rent:          ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'DATA INÍCIO ALUG. CONTRATUAL:', 'DATA FIM ALUG. CONTRATUAL:', 'ALUGUEL CONTRATUAL:', 'DATA RENEGOCIAÇÃO:'),
        table-percent-rent:           ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'TIPO PRODUTO:', 'DATA INÍCIO ALUGUEL %:', 'DATA FIM ALUGUEL %:', 'VOLUME VENDA:', '% VENDA:', 'OBSERVAÇÃO:'),
        table-minimum-rent-reduction: ('SHOPPING:', 'CÓD. CONTRATO:', 'NOME FANTASIA (ATUAL):', 'DATA INÍCIO:', 'DATA FIM:', 'VALOR:', 'TIPO REDUÇÃO:')
      );

      @each $table-key, $nth-key in $table-list {
        $table-name: $table-key;
        &[data-element-name="#{$table-name}"]{
          tbody {
            tr {
              td {
                @each $item in $nth-key {
                   $index: index($nth-key, $item);
                   &:nth-of-type(#{$index}):before { content: $item;}
                }
              }
            }
          }
        }
      }
    }
}

Ваш вывод:

table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(1):before {
  content: "SHOPPING:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(2):before {
  content: "NOME FANTASIA (ATUAL):";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(3):before {
  content: "CÓD. CONTRATO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(4):before {
  content: "DATA ASSINATURA CONTRATO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(5):before {
  content: "DATA INAUGURAÇÃO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(6):before {
  content: "DATA INÍCIO CONTRATO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(7):before {
  content: "DATA FIM CONTRATO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(8):before {
  content: "PRAZO CONTRATO:";
}
table[data-element-name="table-contract-details"] tbody tr td:nth-of-type(9):before {
  content: "ATIVIDADE:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(1):before {
  content: "SHOPPING:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(2):before {
  content: "CÓD. CONTRATO:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(3):before {
  content: "NOME FANTASIA (ATUAL):";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(4):before {
  content: "DATA INÍCIO ALUG. CONTRATUAL:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(5):before {
  content: "DATA FIM ALUG. CONTRATUAL:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(6):before {
  content: "ALUGUEL CONTRATUAL:";
}
table[data-element-name="table-contract-rent"] tbody tr td:nth-of-type(7):before {
  content: "DATA RENEGOCIAÇÃO:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(1):before {
  content: "SHOPPING:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(2):before {
  content: "CÓD. CONTRATO:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(3):before {
  content: "NOME FANTASIA (ATUAL):";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(4):before {
  content: "TIPO PRODUTO:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(5):before {
  content: "DATA INÍCIO ALUGUEL %:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(6):before {
  content: "DATA FIM ALUGUEL %:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(7):before {
  content: "VOLUME VENDA:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(8):before {
  content: "% VENDA:";
}
table[data-element-name="table-percent-rent"] tbody tr td:nth-of-type(9):before {
  content: "OBSERVAÇÃO:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(1):before {
  content: "SHOPPING:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(2):before {
  content: "CÓD. CONTRATO:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(3):before {
  content: "NOME FANTASIA (ATUAL):";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(4):before {
  content: "DATA INÍCIO:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(5):before {
  content: "DATA FIM:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(6):before {
  content: "VALOR:";
}
table[data-element-name="table-minimum-rent-reduction"] tbody tr td:nth-of-type(7):before {
  content: "TIPO REDUÇÃO:";
}