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%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与 a 一起使用@mixin没有问题，例如@include typography.my-mixin(). 但我想@extend在某些情况下使用而不是混合。

Answer 1

命名空间前缀不是必需的@extends- 仅在函数、mixin 和变量上是必需的。删除typography.它应该可以工作：

@use 'base/typography';

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

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

Answer 2

我相信有两种方法可以帮助您解决这个问题：

\n

第一个是使用@mixin代替%typo-button和@include typography.typo-button代替@extend typography.typo-button

\n

或者

\n

你需要在_typography.scss@use \'../main\'内部才能访问（我认为这就是文档所说的意思%typo-button

\n

\n

扩展只会影响上游模块 \xe2\x80\x94 中编写的样式规则，即该样式表使用 @use 规则或 @forward 规则加载的模块、这些模块加载的模块等等

\n

\n

这里https://sass-lang.com/documentation/at-rules/extend#extension-scope）

\n

更新：\n根据 Miriam 的说法，第二个选项不正确。请参阅她的回答以正确使用@extend。

\n