使用SCSS $self 和 & 在文件夹结构中生成自动调整边距

Question

我正在构建一个嵌套文件夹树来显示项目和组。我认为这段很酷的代码会起作用，但由于某种原因，它没有像我希望的那样继续@for。我愿意接受其他解决方案，但为什么这不起作用？感谢您的帮助！

这是有问题的代码：

.item-content {
        margin-left: 15px;
      }
      $self: &;
      @for $i from 1 through $levels {
        #{$self} {
          .item-content {
            margin-left: $i*15px;
          }
        }
        $self: #{ $self + ' ' + & };
      }

$self 应该存储父引用并创建对自身的引用作为父引用。编译时看起来像这样：

.item-content .item-content {
    margin-left: 30px;
}

.item-content .item-content .item-content {
    margin-left: 45px;
}

.item-content .item-content .item-content .item-content {
    margin-left: 60px;
}

Answer 1

看来您正在使用 SCSS 生成具有增量左边距值的嵌套 CSS 类。

$self

变量用于引用父类，

@for

循环应该生成具有递增边距值的嵌套类。

但是，您当前的代码可能无法按预期工作，因为 Sass 变量不是动态的。一旦设置了

$self

，它就会在整个循环中保留其值，并且在后续迭代中不会更改。这意味着

$self

不会在每次迭代中使用新生成的类进行更新。

相反，您可以通过递归混合来实现这一点。这是一个例子：

@mixin generate-levels($levels, $margin-increment) {
  .item-content {
    margin-left: $margin-increment;
    @if $levels > 1 {
      @include generate-levels($levels - 1, $margin-increment + 15px);
    }
  }
}

@include generate-levels(3, 15px);

此 mixin 将生成具有递增边距值的嵌套

.item-content

元素。在此示例中，它生成三个级别，边距增量为 15 像素。

生成的 CSS 将如下所示：

.item-content {
  margin-left: 15px;
}
.item-content .item-content {
  margin-left: 30px;
}
.item-content .item-content .item-content {
  margin-left: 45px;
}

这种方法使用递归来处理嵌套结构，它应该会给你想要的结果。请记住根据您的具体要求调整参数（

$levels

和

$margin-increment

）。