如何动态更改 SASS 中的 nth-child() 属性？

Posted 2023-03-21

【中文标题】如何动态更改 SASS 中的 nth-child() 属性？

【英文标题】：How can I dinamically change the nth-child() property in SASS?

【发布时间】：2022-01-19 18:12:59

【问题描述】：

晚上好，

我目前正在做一个设计项目，并希望得到这样的东西：Menu

为此，我在 SASS 中使用了此代码：

&:nth-child(1)
  left: 10px;

&:nth-child(2)
  left: 15px;

&:nth-child(3)
  left: 30px;

&:nth-child(4)
  left: 35px;

&:nth-child(5)
  left: 50px;

&:nth-child(6)
  left: 55px;

&:nth-child(7)
  left: 70px;

&:nth-child(8)
  left: 75px;

&:nth-child(9)
  left: 50px;

&:nth-child(10)
  left: 55px;

&:nth-child(11)
  left: 30px;

&:nth-child(12)
  left: 35px;

&:nth-child(13)
  left: 10px;

&:nth-child(14)
  left: 15px;

现在是硬编码的，如果列表中的元素数量不同，布局就不一样了。

所以我想动态地做这个，我该怎么做？

提前感谢您的帮助，

亚历克斯

【问题讨论】：

听起来你想在运行时调整布局？ Sass 不会在您的网站本身上执行。它是一个 CSS 预处理器。您可能需要明确说明您想要达到的结果，并使用基于 CSS 的布局或 CSS 和 javascript 的组合。

如果我理解正确，您可以简单地创建一个循环。然后，如果存在重复模式，您可以轻松应用它，如果没有，也许您需要一个数组，其中包含要传递给属性的值。

【参考方案1】：

几个可以帮助你的例子：

如何使用模式创建一个简单的循环

@for $i from 1 through 20 
  li:nth-child(#$i) 
    left: 25px + $i * 10px; // could be anything, you need to find the pattern
  

编译为：

li:nth-child(1) 
  left: 35px;


li:nth-child(2) 
  left: 45px;


li:nth-child(3) 
  left: 55px;


li:nth-child(4) 
  left: 65px;


li:nth-child(5) 
  left: 75px;


li:nth-child(6) 
  left: 85px;


li:nth-child(7) 
  left: 95px;


li:nth-child(8) 
  left: 105px;


li:nth-child(9) 
  left: 115px;


li:nth-child(10) 
  left: 125px;


li:nth-child(11) 
  left: 135px;


li:nth-child(12) 
  left: 145px;


li:nth-child(13) 
  left: 155px;


li:nth-child(14) 
  left: 165px;


li:nth-child(15) 
  left: 175px;


li:nth-child(16) 
  left: 185px;


li:nth-child(17) 
  left: 195px;


li:nth-child(18) 
  left: 205px;


li:nth-child(19) 
  left: 215px;


li:nth-child(20) 
  left: 225px;

如何使用更复杂的模式创建循环

@for $i from 1 through 20 
    @if ($i < 11) 
      li:nth-child(#$i) 
        left: 25px + $i * 10px; // could be anything
      
    
    @else 
      li:nth-child(#$i) 
        left: (25px + (10 * 10px)) - ((11 - $i) * -1) * 10px; // could be anything
       
    

编译为：

li:nth-child(1) 
  left: 35px;


li:nth-child(2) 
  left: 45px;


li:nth-child(3) 
  left: 55px;


li:nth-child(4) 
  left: 65px;


li:nth-child(5) 
  left: 75px;


li:nth-child(6) 
  left: 85px;


li:nth-child(7) 
  left: 95px;


li:nth-child(8) 
  left: 105px;


li:nth-child(9) 
  left: 115px;


li:nth-child(10) 
  left: 125px;


li:nth-child(11) 
  left: 125px;


li:nth-child(12) 
  left: 115px;


li:nth-child(13) 
  left: 105px;


li:nth-child(14) 
  left: 95px;


li:nth-child(15) 
  left: 85px;


li:nth-child(16) 
  left: 75px;


li:nth-child(17) 
  left: 65px;


li:nth-child(18) 
  left: 55px;


li:nth-child(19) 
  left: 45px;


li:nth-child(20) 
  left: 35px;

如何从值列表创建循环

$fooList : 10px, 20px, 30px, 0px, 200px, 80px, -10px;
@for $i from 1 through length($fooList) 
    li:nth-child(#$i) 
        left: nth($fooList, $i);
    

编译为：

li:nth-child(1) 
  left: 10px;


li:nth-child(2) 
  left: 20px;


li:nth-child(3) 
  left: 30px;


li:nth-child(4) 
  left: 0px;


li:nth-child(5) 
  left: 200px;


li:nth-child(6) 
  left: 80px;


li:nth-child(7) 
  left: -10px;