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"?

等内容

将类应用于LESS

1 个答案: