МЕНЬШЕ множественные непосредственные дети

Question

Ожидаемый CSS:

.parent > .type1 { 
    color: red; 
} 
.parent > .type2 { 
    color: red; 
} 
.parent > .type3 { 
    color: red; 
} 

Оригинал МИНУС:

.parent { 
    & > .type1, & > .type2, & > .type3 { 
     color: red; 
    } 
} 

Как совместить type1/type2/TYPE3? Это не работает, потому что типа2/3тип будет скомпилирован для потомков, а не непосредственные дети:

.parent { 
    & > .type1, .type2, .type3 { 
     color: red; 
    } 
} 

Answer 1

С МЕНЕЕ, & будет заменен полностью селектора заворачивания.

Это означает, что

.parent { 
    & > .type1, .type2, .type3 {...} 
} 

становится

.parent > .type1, .type2, .type3 {...} 

Как вы хотите, чтобы сделать ваш код более кратким, следует отметить, что > комбинатор является не необязательными, однако & становится излишним , Подходящий способ написания этого выбора будет:

.parent { 
    > .type1, 
    > .type2, 
    > .type3 {...} 
} 

Который в свою очередь, производит

.parent > .type1, 
.parent > .type2, 
.parent > .type3 {...}