Применить класс ко всем экземплярам родительского селектора в LESS

Question

У меня есть эта таблица стилей LESS. Идея этого заключается в том, чтобы многие классы значков совпадали с моими локальными именами классов в нашем «пространстве имен».

// base-icons.less 
.base-icon { 
    display: block; 
    font: "myFont.otf" 
} 
.base-icon-foo { content: 'foo' } 
.base-icon-bar { content: 'bar' } 
.base-icon-fiz { content: 'fiz' } 

// my-icons.less 
.my-icon { 
    &-foo { .base-icon; .base-icon-foo; } 
    &-bar { .base-icon; .base-icon-bar; } 
    &-fiz { .base-icon; .base-icon-fiz; } 
} 

Есть ли способ, чтобы предотвратить того, чтобы добавить .base-icon класс к каждой отдельной строке в файле my-icons.less? Я хочу применить css ко всем классам, начинающимся с .my-icon, но было бы чище не вводить класс .base-icon каждый раз.

Answer 1

Узнать mixins и extend. Например. (При условии, что вы не можете изменить base-icons.less):

// base-icons.less 

.base-icon { 
    display: block; 
    font: "myFont.otf" 
} 

// my-icons.less 

.i(foo); 
.i(bar); 
.i(baz); 

.i(@name) { 
    .my-icon-@{name} { 
     &:extend(.base-icon); 
     content: '@{name}'; 
    } 
} 

---

Смотрите также такие вещи, как In LESS, can I loop over class/mixin "patterns"?