Управление гнездящихся в LESS

Question

Я хочу, чтобы получить что-то вроде

.classA, .classB, .classC, .classD, .classE { 
    color: white; 
} 

.classA .classI, .classB .classI, classC .classI { 
    background: red; 
} 

это возможно что-то вроде

.classA, .classB, .classC { 
    color: white; 
    .classI { 
    background: red; 
    } 
} 

класса D и Е не следует Geht классу I.

с надеждой вы знаете, что я имею в виду

Answer 1

Для вашего случая вы не должны использовать .classD и .classE на верхнем уровне, потому что вложенный селектор не применяется ко всем из них.

Вы должны использовать только .classA, .classB, .classC, а затем использовать :extend для двух других.

.classA, .classB, .classC { 
    color: white; 
    .classI { 
    background: red; 
    } 
} 
.classD, .classE { 
    &:extend(.classA); 
} 

При компиляции это приведет к следующему CSS:

.classA, .classB, .classC, .classD, .classE { 
    color: white; 
} 
.classA .classI, .classB .classI, .classC .classI { 
    background: red; 
} 

Answer 2

Да вот так:

.classA { 
    color: white; 
    &.classI { 
    background: red; 
    } 
}