添加样式的HTML标签基于dir scss

Question

在我的下一个项目中，我使用dart-sass与一个名为constants的文件来确定一个名为$dir的变量的值，该变量控制一些mixins的功能。如果HTML标签有一个dir属性，我想修改$dir变量的值。我现在所拥有的(它不起作用)是这个

$dir: "ltr";
html {
&[dir="ltr"] {
$dir: "ltr" !global;
}
&[dir="rtl"] {
$dir: "rtl" !global;
}
}

和我的HTML标签有一个值为"ltr"但实际情况是变量一直被重写为"rtl"即使dir的值是"ltr">

同样如果我把上面的代码改成

$dir: "ltr";
html {
&[dir="rtl"] {
$dir: "rtl" !global;
}
&[dir="ltr"] {
$dir: "ltr" !global;
}
}

$dir的值变成"ltr"这意味着两种样式都被应用并且只是相互覆盖所以我错过了什么?

Answer 1

我认为此时您不需要考虑全局变量。使用你的代码库作为开关，使用独特的mixins来编写不同的rtl/ltr风格。每次只需要通过导入文件将本地变量转发到另一个样式表。

这个想法看起来像这样:

//######> file: main.scss
// ## general mixin
@mixin background($dir){
@if($dir == 'ltr'){
background: green;
}
@if($dir == 'rtl'){
background: red;
}
}

// ###### main styles
html {
&[dir="ltr"] {
$dir: 'ltr' ;
@import 'ltrStyles';
}
&[dir="rtl"] {
$dir: 'rtl' ;
@import 'rtlStyles';
}
}
//######> file: _rtlStyles.scss
.rtlClass {
@include background($dir);
}

//#####> file: _ltrStyles.scss
.ltrClass {
@include background($dir);
}

//######> result:
html[dir=ltr] .ltrClass {
background: green;
}
html[dir=rtl] .rtlClass {
background: red;
}

(只是作为向前看的例子…)

Answer 2

好的，我想出了另一种方法来全局改变变量。sass-loader允许您添加额外的数据，这些数据作为全局变量在配置文件中传递(在我的例子中是next .config)。而且由于配置文件是一个js文件，我能够从文件中确定网站的语言，并使用if条件切换$dir。所以我做了以下修改:

$dir: 'ltr' !default;

在每个需要这个变量的文件中然后我调整bundle文件中的'@use'如下

@use "helpers" as h with(
$dir: $dir
);

，对于我使用helper模块的每个组件或页面都是如此。这意味着我必须在导入后使用的每个变量或mixin之前添加h.，但我对此很好我仍然不明白为什么全局覆盖不起作用