时间戳

首页 > 解决方案 > 链接到父级的 SASS 选择类

sass - 链接到父级的 SASS 选择类

问题描述

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

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

在 SASS 中，当类链接到它时，如何为.child元素赋予属性？parentgreen

我试过了：

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

它不起作用。

我还尝试了以下方法，但我正在寻找类似于上述 sass 的方法。代码将在下面变得可重复，因为我必须child每次为每个动态类添加。

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

如果可能的话，我正在尝试使用 sass 获得这样的结构：

.parent {
       .child {
          .green & { /* when .parent.green */
            color: green;
          }
          .blue & { /* when .parent.blue */
            color: blue;
          }
          .text-align-right & { /* when .parent.text-align-right */
            text-align: right;
          }
          etc...
       }
    }

标签： sass

解决方案

&在 Sass中被视为父选择器引用，因此您的代码不起作用，因为它引用了错误的选择器。

在这里直接使用&无济于事，但你的目标可以通过使用 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上查看。

推荐阅读