csslessscss-mixinsless-mixins

Less custom function for :first-letter uppercase


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 ?


Solution

  • 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