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

【问题标题】：How can I dinamically change the nth-child() property in SASS?如何动态更改 SASS 中的 nth-child() 属性？
【发布时间】：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 的组合。
如果我理解正确，您可以简单地创建一个循环。然后，如果存在重复模式，您可以轻松应用它，如果没有，也许您需要一个数组，其中包含要传递给属性的值。

标签： css web sass

【解决方案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;
}

【讨论】：