I've recently started using sass and I'm encountering some difficulties with the ::before syntax within a @for loop.
My table row consists of six td elements.
<tr>
<td></td>
<td></td>
<td data-th="Entered"></td>
<td data-th="Location"></td>
<td></td>
<td></td>
</tr>
For responsiveness, I've converted my table to a list and want to include the data-th in my list when on a mobile view.
I tried implementing a for loop like this
@for $i from 3 to 5 {
td::before(#{$i}) {
/* The middle element */
content: attr(data-th)": ";
}
}
Unfortunately, I'm not seeing any changes.
I tested a similar concept using background color on an nth child and it worked
@for $i from 3 to 5 {
td:nth-child(#{$i}) {
/* The middle element */
background: red;
}
}
I can make it work by simply using
td {
&:before { content: attr(data-th)": " }
}
However, this adds the colon to every td. Any advice would be greatly appreciated.