CSS Sass nth-child 嵌套
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20499850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sass nth-child nesting
提问by Ryan
I'm refactoring these CSS selectors over to Sass:
我正在将这些 CSS 选择器重构为 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) {"
"&" 后的 CSSS 无效：预期为 "{"，为 "(2), &(4), &(6) {"
I also know this could be better because I'm:
我也知道这可能会更好，因为我是：
- repeating the background color
- repeating numbers - i.e. (2) and (6)
- 重复背景颜色
- 重复数字 - 即 (2) 和 (6)
How should I refactor these selectors?
我应该如何重构这些选择器？
回答by Bill Criswell
I'd be careful about trying to get too clever here. I think it's confusing as it is and using more advanced nth-childparameters will only make it more complicated. As for the background color I'd just set that to a variable.
我会小心不要在这里变得太聪明。我认为这很令人困惑，使用更高级的nth-child参数只会让它变得更复杂。至于背景颜色，我只是将其设置为一个变量。
Here goes what I came up with before I realized trying to be too clever might be a bad thing.
在我意识到试图变得太聪明可能是一件坏事之前，我想出了这个主意。
#romtest {
$bg: #e5e5e5;
.detailed {
th {
&:nth-child(-2n+6) {
background-color: $bg;
}
}
td {
&:nth-child(3n), &:nth-child(2), &:nth-child(7) {
background-color: $bg;
}
&.last {
&:nth-child(-2n+4){
background-color: $bg;
}
}
}
}
}
and here is a quick demo: http://codepen.io/anon/pen/BEImD
这是一个快速演示：http: //codepen.io/anon/pen/BEImD
----EDIT----
- - 编辑 - -
Here's another approach to avoid retyping background-color:
这是避免重新输入的另一种方法background-color：
#romtest {
%highlight {
background-color: #e5e5e5;
}
.detailed {
th {
&:nth-child(-2n+6) {
@extend %highlight;
}
}
td {
&:nth-child(3n), &:nth-child(2), &:nth-child(7) {
@extend %highlight;
}
&.last {
&:nth-child(-2n+4){
@extend %highlight;
}
}
}
}
}
回答by Vinay Raghu
You're trying to do &(2), &(4)which won't work
你试图做的事&(2), &(4)是行不通的
#romtest {
.detailed {
th {
&:nth-child(2) {//your styles here}
&:nth-child(4) {//your styles here}
&:nth-child(6) {//your styles here}
}
}
}
