Я хотел бы отобразить 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:"; }
}
}
}

У вас есть карта с вложенными списки, а не карты.
Таким образом, вы можете создать цикл для этих списков с @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:";
}