SASS:将@extend 与@use 一起使用

Question

我有以下两个文件:

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

_typography.scss文件包含:

$font-family: Roboto;

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

现在我正在尝试 @extend main.scss中的一个类(class)与占位符 %typo-button.

@use 'base/typography';

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

抛出以下错误:

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

那么使用 @extend 的正确语法是什么？与 @use ?使用 @use与 @mixin没问题，例如 @include typography.my-mixin() .但我想用 @extend在某些情况下而不是 mixins。

Answer 1

@extends 上不需要命名空间前缀- 仅在函数、mixin 和变量上。删除 typography.它应该工作:

@use 'base/typography';

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

(上面提到的上游限制意味着“typography”模块不能在使用它的“main”模块内扩展任何东西——但“main”中的选择器可以扩展“typography”中的选择器。)