[Feature Request] Documentation: Describe how to use sass to aggregate multiple vuetify css classes

Problem to solve

Keeping things DRY with CSS.

Currently when multiple vuetify classes (e.g. .text-caption .text-left .font-weight-thin) are used in numerous places in a page, these all have to be edited and maintained individually causing orders of magnitude more edits, and bugs.

A solution was searched for and asked on discord but answers were not forthcoming.

A naive implementation caused a sass build time error:

 ERROR  in ./components/Section.vue?vue&type=style&index=0&id=1b21a30e&scoped=true&lang=sass&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend .text-caption !optional" to avoid this error.
   ╷
97 │   @extend .text-caption
   │   ^^^^^^^^^^^^^^^^^^^^^
   ╵

Proposed solution

Describe how to use sass to create aggregate class definitions. Correct the following code and place within the documentation.

<style scoped lang="sass">

@import '~vuetify/src/styles/styles.sass'

.section-text
  @extend .text-caption
  @extend .text-left
  @extend .font-weight-thin
...

[KaelWD]

You don’t. You would have to import ~vuetify/src/styles/main.sass instead as that actually contains the classes you want to extend, but then you will get duplicated styles:
https://stackoverflow.com/q/58905949/2074736
https://github.com/webpack-contrib/sass-loader/issues/145#issuecomment-173984354

.section-text
  $properties: map-deep-get($utilities, 'typography', 'property')
  @for $i from 1 through length($properties)
    $property: nth($properties, $i)
    $value: nth(map-get($typography, 'caption'), $i)
    @if $value != false
      #{$property}: $value

  text-align: left
  font-weight: map-get($font-weights, 'thin')

or

@mixin extend-utility($class, $utility, $values) {
  @include generate-utility(map-merge(map-get($utilities, $utility), (
    class: $class,
    values: (
      null: $values
    )
  )), '');
}

@include extend-utility('section-text', 'typography', map-get($typography, 'caption'));

.section-text {
  text-align: left;
  font-weight: map-get($font-weights, 'thin') !important;
}

[KaelWD]

Depending on how https://github.com/sass/sass/issues/2745 is implemented (if ever) this might eventually be possible.