Sass не в @extend селекторы, созданные с помощью родительского селектора

Question

мне нужно создать выход CSS сделано с SCSS и заполнителем определенным образом

Это выход, который я хочу

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
} 

---

Когда я пытаюсь это с SCSS placeholder как этот

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend %placeholder !optional; 
} 

я только получаю этот результат

.myclass { 
    color: silver; 
} 

Золотая часть полностью упала.

---

Мне нужен заменитель, потому что я использую много селекторов, как a.myclass, input.myclass и т.д., и не хочу разобранный @export из этих

Если я не использую заполнитель, но случайный селектор, и принять некоторые extry байт-вывод не является правильным, либо

ae739ab7 { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

дает

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7 ae739ab7-gold, .myclass ae739ab7-gold { 
    color: gold; 
} 

---

и

ae739ab7 { 
    color: silver; 
    &-gold { 
    color: gold; 
    } 
} 

.myclass { 
    @extend ae739ab7 !optional; 
} 

дает мне

ae739ab7, .myclass { 
    color: silver; 
} 
ae739ab7-gold { 
    color: gold; 
} 

То, что здесь не хватает всегда селектор .myclass-gold

Возможно ли это как-то с каким-то магическим трюком?

Answer 1

Расширяет только работу с точными совпадениями. Когда вы пишете это:

%placeholder { 
    color: silver; 
    #{&}-gold { 
    color: gold; 
    } 
} 

То, что вы действительно создали это:

%placeholder { 
    color: silver; 
} 

%placeholder %placeholder-gold { 
    color: gold; 
} 

Так что, когда вы пишете это:

.myclass { 
    @extend %placeholder !optional; 
} 

Это будет только расширить селектор %placeholder и не %placeholder-gold селектор. Чтобы получить поведение, которое вы ищете, вы должны продлить каждый селектор замещающий индивидуально:

%placeholder { 
    color: silver; 
    @at-root #{&}-gold { 
    color: gold; 
    } 
} 

@mixin placeholder { 
    & { 
     @extend %placeholder; 
     @at-root #{&}-gold { 
      @extend %placeholder-gold; 
     } 
    } 
} 

.myclass { 
    @include placeholder; 
} 

Выход:

.myclass { 
    color: silver; 
} 
.myclass-gold { 
    color: gold; 
}