I'm refactoring these CSS selectors over to Sass:
#romtest .detailed th:nth-child(2),
#romtest .detailed th:nth-child(4),
#romtest .detailed th:nth-child(6),
#romtest .detailed td:nth-child(2),
#romtest .detailed td:nth-child(3),
#romtest .detailed td:nth-child(6),
#romtest .detailed td:nth-child(7),
#romtest .detailed td.last:nth-child(2),
#romtest .detailed td.last:nth-child(4) {
background:#e5e5e5;
}
...and came up with this:
#romtest .detailed {
th:nth-child {
&(2), &(4), &(6) {
background:#e5e5e5;
}
}
td:nth-child {
&(2), &(3), &(6), &(7) {
background:#e5e5e5;
}
}
td.last:nth-child {
&(2), &(4) {
background:#e5e5e5;
}
}
}
Unfortunately this is throwing an error:
Invalid CSSS after "&": expected "{", was "(2), &(4), &(6) {"
I also know this could be better because I'm:
How should I refactor these selectors?
You're trying to do &(2), &(4)
which won't work
#romtest {
.detailed {
th {
&:nth-child(2) {//your styles here}
&:nth-child(4) {//your styles here}
&:nth-child(6) {//your styles here}
}
}
}
Source: Stackoverflow.com