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

Posted 2023-03-06

【中文标题】使用第 n 个子值作为 SASS 变量

【英文标题】：Use nth-child value as a SASS variable

【发布时间】：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

【讨论】：

谢谢，但我们的目标是避免出现多个类似的行。

仍然依赖于传入的显式参数，但仍然比完全手动好！谢谢！