Как выбрать "самостоятельно", но не полностью скомпилированный родительский селектор с помощью scss?

Question

Теперь у меня есть структура HTML, как показано ниже:

<div class="land">

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

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

</div>

, и вот мой файл scss:

.land{
   @mixin colorSet{
      $self:&;

       &__fruit{
          background:red;
       }

       &--yellow{
           #{$self}__fruit{
              background:yellow;
           }
       }
   }
   .tree{
       @include colorSet();
   }

}

Хотя класс ".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;
} 

Есть ли какое-нибудь решение?

Answer 1

В 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, находилось на верхнем уровне, проблема исчезла.