使用第 n 个子值作为 SASS 变量答案

【问题标题】：Use nth-child value as a SASS variable使用第 n 个子值作为 SASS 变量
【发布时间】：2013-12-05 21:20:43
【问题描述】：

有没有办法将nth-child 值用作 SASS 变量？

使用示例：

div:nth-child(n) {
    content: '#{$n}'
}

div:nth-child(n) {
    background: rgb(#{$n}, #{$n}, #{$n});
}

【问题讨论】：

【解决方案1】：

我认为没有办法做到这一点。但是你可以使用@for 指令来遍历已知数量的元素：

$elements: 15;
@for $i from 0 to $elements {
  div:nth-child(#{$i + 1}) {
     background: rgb($i, $i, $i);
  }
}

【讨论】：

这就是我今天正在做的事情，如果能找到一种对未知数量的元素执行此操作的方法会很高兴。
有没有办法根据你生成的DOM中有多少元素来动态设置$elements？
@gwho 你不能这样做，因为 CSS 不知道 DOM 中的内容。
不错的sn-p，非常感谢。但对我来说，只有当我替换“从 0 到 $elements”=>“从 1 到 $elements + 1”和“rgb(#{$i},...”->“rgb($i ,..."。不确定我的 sass 版本是否与后一个问题有关。
@ahnbizcad，如果你编译你的 sass 服务器端，确实存在一种将 DOM 信息设置为 SASS 变量的复杂方法。这是一个可怕的想法。 viget.com/extend/…

【解决方案2】：

你可以像这样使用 mixin：

 @mixin child($n) {
     &:nth-child(#{$n}){
           background-color:rgb($n,$n,$n);
     }
 }

 div{
     @include child(2);
    }

编译后的css如下：

div:nth-child(2) {
   background-color: #020202;
}

查看示例here

【讨论】：