How to use SASS extends within scoped style blocks

Hello,

In our project, we use SASS to style our components.
Some of our components have scoped style blocks that use a mixin to extend a class:

  // scoped scss:
  .card-title {
    line-height: 18px;
    color: #898784;
    margin-left: 25px;
    @include text(section);
  }

  // mixin
  @mixin text($type) {
      $fontType: text- + $type;
      @extend .#{$fontType};
  }

We have a set of classes in global-classes.scss we like to use for our text styling:

.text-section {
  font-size: 16px;
  letter-spacing: 3px;
  font-weight: 400;
  text-transform: uppercase;
}

.text-body {
  font-size: 16px;
  letter-spacing: 0.3px;
  font-weight: 400;
  line-height: 18px;
}

The classes can be made globally available by including the file into vue.config.js:

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/styling/global-classes.scss";
        `
      }
    }
  }

But then these classes are generated in every scoped style component.


Is there a way to have these classes globally available without generating the classes with a data-property for every scoped component?

Having these classes 20 times in my compiled CSS file seems rather useless.

1 Like

Well, apparently I do not know how to SASS, because it has nothing to do with Vue.js.

Instead of using the dot-notation for classes in my global-classes.scss, I can use the percentage-notation:

By changing the code from:

  // scoped scss:
  .card-title {
    line-height: 18px;
    color: #898784;
    margin-left: 25px;
    @include text(section);
  }
 
  // global-classes.scss
  .text-section {
    font-size: 16px;
    letter-spacing: 3px;
    font-weight: 400;
    text-transform: uppercase;
  }

  // mixin
  @mixin text($type) {
      $fontType: text- + $type;
      @extend .#{$fontType};
  }

to:

  // scoped scss:
  .card-title {
    line-height: 18px;
    color: #898784;
    margin-left: 25px;
    @include text(section);
  }
 
  // global-classes.scss
  %text-section {   // Changed dot to percentage
    font-size: 16px;
    letter-spacing: 3px;
    font-weight: 400;
    text-transform: uppercase;
  }

  // mixin
  @mixin text($type) {
      $fontType: text- + $type;
      @extend %#{$fontType};   // Changed dot to percentage
  }

everything works as expected :slight_smile:

1 Like

How would this work if you are using helper classes from Bootstrap for example? We want to use the 100s or so helper classes that are generated automatically.