SASS: Using @extend with @use

Question

I have the two following files:

main.scss
|- base
|  |- _typography.scss

The _typography.scss file contains:

$font-family: Roboto;

%typo-button{
    font-family: $font-family;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

Now I am triying to @extend a class in main.scss with the placeholder %typo-button.

@use 'base/typography';

.button{
    display: inline-block;
    height: 48px;
    padding: 12px 0px;
    @extend typography.%typo-button;
}

The following error is thrown:

Error: Expected identifier.
│     @extend typography.%typo-button;

So what is the correct syntax to use @extend with @use? Using @use with a @mixin is no problem, e.g.@include typography.my-mixin(). But I would like to use @extend instead of mixins in some cases.

Answer 1

Namespace prefixes are not necessary on @extends - only on functions, mixins, and variables. Remove typography. and it should work:

@use 'base/typography';

.button{
    display: inline-block;
    height: 48px;
    padding: 12px 0px;
    @extend %typo-button;
}

(The upstream limitation mentioned above means that the "typography" module can't extend anything inside the "main" module that uses it – but selectors in "main" can extend selectors in "typography".)