Sass 如何使用scss选择“自”但不是完全编译的父选择器？

现在我有如下HTML结构：

<div class="land">

    <div class="tree">
        <div class="fruit"></div>
    </div>

    <div class="tree tree--yellow">
        <div class="tree__fruit"></div>
    </div>

</div>

而class.land和@mixin都是必需的，因为我将在其他地方使用它

理想条件是这里我使用if语句来描述条件，我想这将更容易实现：

if (tree has the class 'tree--yellow' ){

  fruit which is belong to this tree turn yellow;

}

但是css似乎不是这样编译的，它只是生成

.land .tree-yellow .land .tree__fruit{
    background:yellow;
} 

我想要的是：

.land .tree-yellow .tree__fruit{
    background:yellow;
} 

有什么解决方案吗？

在Sass中，&是“当前选择器到此点”的缩写，这意味着您将始终获得嵌套在其中的所有选择器，直到根

一种解决方法是让colorSet将选择器作为参数，而不是在

.land{
   @mixin colorSet($selector){

       #{$selector}__fruit{
          background:red;
       }

       #{$selector}--yellow{
           #{$selector}__fruit{
              background:yellow;
           }
       }

       #{$selector} {
           @content; //include content so you can further define styles 
       }
   }

   @include colorSet(.tree);

}

对我来说，这是尽可能减少嵌套的有力论据。如果我理解正确的话，你所表达的意思是：生长在陆地上的任何黄色树木的果实都应该是黄色的。也许这是对的，但你是否在期待那些不在陆地上生长的树木？生长在水中的黄色树木应该结蓝色的果实，还是说这毫无意义

如果删除嵌套，使任何使用颜色集的内容都处于顶层，那么问题就会消失。

在Sass中，&是“当前选择器到此点”的缩写，这意味着您将始终获得嵌套的所有选择器，直到根

一种解决方法是让colorSet将选择器作为参数，而不是在

.land{
   @mixin colorSet($selector){

       #{$selector}__fruit{
          background:red;
       }

       #{$selector}--yellow{
           #{$selector}__fruit{
              background:yellow;
           }
       }

       #{$selector} {
           @content; //include content so you can further define styles 
       }
   }

   @include colorSet(.tree);

}

对我来说，这是尽可能减少嵌套的有力论据。如果我理解正确的话，你所表达的意思是：生长在陆地上的任何黄色树木的果实都应该是黄色的。也许这是对的，但你是否在期待那些不在陆地上生长的树木？生长在水中的黄色树木应该结蓝色的果实，还是说这毫无意义

---

如果删除嵌套，使任何使用colorSet的内容都处于顶层，那么问题就消失了。

$self从何而来？它是SCSS提供的吗？self只是我在mixin中声明的一个变量，它引用了父选择器“&”@BenHullyou可以在这里查看这篇文章@BenHullRight-抱歉，我错过了顶部的作业。我习惯了缩进语法，$self从哪里来？它是SCSS提供的吗？self只是我在mixin中声明的一个变量，它引用了父选择器“&”@BenHullyou可以在这里查看这篇文章@BenHullRight-抱歉，我错过了顶部的作业。我已经习惯了缩进语法。很好的解决方案：DNice解决方案：D