CODEWITHSUNDEEP
csslessscss-mixinsless-mixins
Alexandre Daubricourt
Alexandre Daubricourt

Reputation: 4963

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 ?

Upvotes: 1

Views: 165

Answers (1)

Pete
Pete

Reputation: 58462

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

Upvotes: 2

Related Questions