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

Question

晚上好

我目前正在从事一个设计元素，希望得到这样的东西: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;
}

现在，它是硬编码的，如果列表中的元素数量不同，布局也不相同。

所以我想动态地执行此操作，我该怎么做呢？

在此先感谢您的帮助，

亚历克斯

Answer 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;
}