I'd like to render the CSS below, but I'm having trouble traversing this my double array.
How do I go to access both the first array and the second array and create the element equal to the below?
The problem I am having is that I can access the first map, but the second map that is inside the first one in @debug comes as "inline" ..
@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 };
}*/
}
}
}
The output should be this:
&[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:"; }
}
}
}
You have a map with nested lists not maps.
So you could create a loop for these lists with @each getting the index at every loop:
@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;}
}
This is the complete code
@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;}
}
}
}
}
}
}
}
}
Your output:
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:";
}