Sass nth-child nesting

Viewed 135231

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:

  • repeating the background color
  • repeating numbers - i.e. (2) and (6)

How should I refactor these selectors?

2 Answers
Related