Less custom function for :first-letter uppercase

Question

I'm looking for a way to create a custom mixin less function that would act as follows:

.my-class {
  ... .FirstLetterUppercase();
}

And that would transpile to:

.my-class {
  ...
}

.my-class:first-letter {
  text-transform: uppercase;
}

Is that possible with less ?

Answer 1

You can do the following:

.FirstLetterUppercase() {
  &:first-letter {
    text-transform: uppercase;
  }
}

.my-class {
  .FirstLetterUppercase();
}

More information about mixins
More information about nesting, pseudo-selectors and the ampersand