Question

我有以下HTML <div class="parent green"></div>

可以添加或可以不添加green类。它是动态的。它也可能是另一个名字。

在SASS中，如何将类.child链接到parent的{{1}}元素中来赋予属性？

我尝试过：

green

它不起作用。

我也尝试了以下可行的方法，但我正在寻找类似于上述无礼的方法。下面的代码将变得可重复，因为我必须为每个动态类每次添加.parent { .child { .green & { color: green; } } }。

child

我正在尝试使用sass获得这样的结构：

  .parent {
     &.green {
       .child {        
          color: green;
       }
     }
   }

Answer 1

&在Sass中被视为parent selector reference，因此您的代码无法使用，因为它引用了错误的选择器。

直接使用&在这里无济于事，但是您的目标可以通过使用mixins来实现，例如：

@mixin child($class) {
  &.#{$class} {
    .child {
      @content;
    }
  }
}

.parent {
  @include child(green) {
    color: green;
  }
  @include child(blue) {
    color: blue;
  }
  @include child(text-align-right) {
    text-align: right;
  }
}

这段代码会产生您想要获得的结果，您可以自己在sassmeister上进行签入。

链接到父级的SASS选择类

1 个答案: