1

I've got this LESS stylesheet. The idea it to alias a lot of icon classes to my local classnames in our "namespace".

// 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; }
}

Is there a way to prevent having to add the .base-icon class to each single line in the my-icons.less file? I want to apply the css to all classes that start with .my-icon but it would be cleaner to not have to type the .base-icon class each time.

ChrisR
  • 14,370
  • 16
  • 70
  • 107

1 Answers1

1

Learn mixins and extend. E.g. (assuming you can't modify 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}';
    }
}

Also see stuff like In LESS, can I loop over class/mixin "patterns"?

Community
  • 1
  • 1
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57