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 ?

Pete · Accepted Answer · 2019-11-28T13:31:59.540

2

You can do the following:

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

.my-class {
  .FirstLetterUppercase();
}

edited Nov 28 '19 at 13:31

answered Nov 28 '19 at 13:06

Pete

1

Would add parentheses around the .FirstLetterUppercase so its not included in the output. Maybe add a bit about that this is called a mixin and link to the less documentation? – Persijn Nov 28 '19 at 13:27
Awesome thank you! It may seem simple but for me the mixins documentation was not that obvious to understand (I was missing the ampersand indeed) – Alexandre Daubricourt Nov 28 '19 at 15:05
@AlexandreDaubricourt I thought that too - to be fair I had a guess at it as you can do something similar with sass and my first attempt worked in a less compiler (although I didn't know adding the parenthesis would mean it didn't output the original style) – Pete Nov 28 '19 at 15:09

1 Answers1