我想在下面呈现CSS，但是遍历我的double数组时遇到问题。
如何访问第一个数组和第二个数组并创建与下面的元素相等的元素？
我遇到的问题是我可以访问第一个地图，但是@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:"; }
}
}
}
答案 0 :(得分：0)
您的地图中包含嵌套的列表，而不是地图。
因此，您可以使用@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:";
}