Global component theming issue

[FezVrasta]

I have this LESS:

.foo-bar {
  &__el1 {
    height: 10px;
  }
  &__el2 {
    height: 15px;
  }
  &__el3 {
    height: 10px;
  }
}

now... I want to add some theming variations to it:

.foo-bar {
  &--sm {
    // here something to change the height of my 3 elements...
  }
  [...]
}

Obviously I don't want to apply the --sm variation to each element of my component, but I want to add it just to the component and changing the rest accordingly.

How to proceed?
Should I repeat all the elements name by hand?
Doing so, when I want to rename a component, I'll have to manually rename all of them.

.foo-bar {
  &--sm {
    .foo-bar__el1 {
      height: 5px;
     }
     [...]
   }
}