将类应用于 LESS 中父选择器的所有实例答案

【问题标题】：Apply class to all instances of parent selector in LESS将类应用于 LESS 中父选择器的所有实例
【发布时间】：2016-01-02 06:33:51
【问题描述】：

我有这个 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 类会更简洁。

【问题讨论】：

标签： less

【解决方案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"?之类的东西

【讨论】：