Sentence case for CSS

sentence-case.sass

// CSS doesn't have a text-transform: sentence case,
// so here's a little mixin to spoof it for you

@mixin sentence-case() {
  text-transform: lowercase;
  &:first-letter {
    text-transform: uppercase;
  }
}

// USAGE:
.form-label {
  @include sentence-case();
}

// COMPILED CSS:
.form-label {
  text-transform: lowercase;
}

.form-label:first-letter {
  text-transform: uppercase;
}

Of course, true sentence case would leave some things, like the first letter of proper nouns, in uppercase. :)

why not just remove the need to override and just use something like:

@mixin sentence-case() {
  &::first-letter {
    text-transform: uppercase;
  }
}

The problem with the current implementation is that it will lower any proper name or previously capitalized letter.

I was working on some classes like this and came across this thread on google.

.case-none { text-transform: none }
.case-upper { text-transform: uppercase }
.case-lower { text-transform: lowercase }
.case-proper { text-transform: capitalize }
.case-sentence::first-letter { text-transform: uppercase }

If you use classes like this then you could compose class="case-lower case-sentence" to get the first effect when you need it but otherwise have sentence just uppercase the first letter.

After further thinking I went with these.

.case-none { text-transform: none }
.case-upper { text-transform: uppercase }
.case-lower { text-transform: lowercase }
.case-proper { text-transform: capitalize }

.letter-upper::first-letter { text-transform: uppercase }
.letter-lower::first-letter { text-transform: lowercase }

You can compose class="case-lower letter-upper" to produce sentence case.