如何将变量和样式规则导入一个文件

Question

我有theme.scss文件，它包含我的网站的样式，它的内容看起来类似于

//Direction variable[rtl|ltr]
$direction: ltr;
//Theme style
.selector-1 {
    color: red;
}
.selector-2 {
    color: red;
    @if $direction == ltr {
        right: 9px;
    } @else {
        left: 9px;
    }
}

我需要将$direction变量与样式分开。我需要创建两个新文件：ltr.scss & rtl.scss。如果区域设置为ltr，则从角分量调用ltr.scss，否则调用rtl.scss。

我到目前为止所做的：

theme.scss

.selector-1 {
    color: red;
}
.selector-2 {
    color: red;
    @if $direction == ltr {
        right: 9px;
    } @else {
        left: 9px;
    }
}

ltr.scss

$direction: ltr;
@import './theme.scss';

rtl.scss

$direction: rtl;
@import './theme.scss';

但我得到了SassError: Undefined variable.的$direction。

我知道我应该将ltr.scss或rtl.scss导入到theme.scss文件中以删除错误，但在本例中，我必须创建另外两个新文件& theme-ltr.scss & theme-rtl.scss；每个文件都有冗余代码。

如何只创建两个新的文件，我将包括在我的角组件(一个为ltr和另一个为rtl)，并使每个文件声明方向变量&导入网站主题文件？

Answer 1

将@import替换为@use时，可以使用 with 关键字将变量通过配置传递给导入的文件。看起来是这样的：

@use './theme.scss' with (
  $direction: ltr
);

有关@use和with的更多信息，您可以查看官方的SASS文档：https://sass-lang.com/documentation/at-rules/use#configuration