I've broken some code by changing from import to use. The idea is to create a flexible & reusable typography style file which can be used to generate a bunch of classes to style the app.

typography.scss

@import "@fontsource/rubik/400.css"; // regular
@import "@fontsource/rubik/500.css"; // medium
@import "@fontsource/rubik/600.css"; // semi-bold

:root {
  --ion-font-family: 'Rubik';
}

// Text class mixin
@mixin textClass($size, $prefix: 'text-', $class: '', $suffix: '', $tag: '') {
  $selector: '';

  @if $class =='' {
    $selector: '.#{$prefix}#{$suffix}';
  }

  @else {
    $selector: '.#{$class}';
  }

  @if $tag !='' {
    $selector: '#{$tag},#{$selector}';
  }

  #{'#{$selector}'} {
  font-family: var(--ion-font-family);
    font-size: #{$size};
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    @content;
  }
}

// .headline, h1
@include textClass(42px, $class: headline, $tag: 'h1') {
  font-weight: 400;
};

@include textClass(18px, $suffix: button-label) {
  font-weight: 500;
  letter-spacing: 0.32px;
  padding: 5.5px 0;
  text-transform: none !important;
}

@include textClass(18px, $suffix: medium) {
  line-height: 24px;
}

This could be used around the app like this:

my-cool-whatsitponent.scss

@import '<path-to>/typography.scss';
.whatsit-button {
  ...
  @extend .text-button-label;
  ...

}

I'm migrating up a few versions of Angular and making lots of improvements. And it has been strongly suggested to move away from using @import for "reasons". However, I'm struggling to get this seemingly straight forward conversion to work! The typography file stays as is...

@use '<path-to>/typography' as typo;

{
  ...
  @include typo.text-medium;
  ...
}

is NOT right. Neither is:

@use '<path-to>/typography' as typo;

{
  ...
  @extend typo.text-medium;
  ...
}

A little concrete information would be great on this?

I've broken some code by changing from import to use. The idea is to create a flexible & reusable typography style file which can be used to generate a bunch of classes to style the app.

typography.scss

@import "@fontsource/rubik/400.css"; // regular
@import "@fontsource/rubik/500.css"; // medium
@import "@fontsource/rubik/600.css"; // semi-bold

:root {
  --ion-font-family: 'Rubik';
}

// Text class mixin
@mixin textClass($size, $prefix: 'text-', $class: '', $suffix: '', $tag: '') {
  $selector: '';

  @if $class =='' {
    $selector: '.#{$prefix}#{$suffix}';
  }

  @else {
    $selector: '.#{$class}';
  }

  @if $tag !='' {
    $selector: '#{$tag},#{$selector}';
  }

  #{'#{$selector}'} {
  font-family: var(--ion-font-family);
    font-size: #{$size};
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    @content;
  }
}

// .headline, h1
@include textClass(42px, $class: headline, $tag: 'h1') {
  font-weight: 400;
};

@include textClass(18px, $suffix: button-label) {
  font-weight: 500;
  letter-spacing: 0.32px;
  padding: 5.5px 0;
  text-transform: none !important;
}

@include textClass(18px, $suffix: medium) {
  line-height: 24px;
}

This could be used around the app like this:

my-cool-whatsitponent.scss

@import '<path-to>/typography.scss';
.whatsit-button {
  ...
  @extend .text-button-label;
  ...

}

I'm migrating up a few versions of Angular and making lots of improvements. And it has been strongly suggested to move away from using @import for "reasons". However, I'm struggling to get this seemingly straight forward conversion to work! The typography file stays as is...

@use '<path-to>/typography' as typo;

{
  ...
  @include typo.text-medium;
  ...
}

is NOT right. Neither is:

@use '<path-to>/typography' as typo;

{
  ...
  @extend typo.text-medium;
  ...
}

A little concrete information would be great on this?

• css
• sass

1 Answer 1

I think this could be somewhat clearer on the Sass @use documentation, but when you're extending from a @use-d import, you don't need to include the namespace of what you @use, unlike mixins, variables, and functions. This makes sense because any rendered CSS classes are already in the global scope and so namespacing doesn't really work.

@use '<path-to>/typography' as typo;

// No namespace required if extending a class
.whatsit-button {
  @extend .text-button-label;
}

// But namespace _is_ required if using a mixin
@include typo.textClass("16px", "", "whatsit-button-2");

Hope that helps!