0

在我的 nuxt 项目中，我使用 dart-sass 和一个名为 constants 的文件来确定一个名为 $dir 的变量的值，该变量控制一些 mixins 的功能。如果 html 标记具有 dir 属性，我想修改 $dir 变量的值。我现在拥有的（不起作用）是这个

$dir: "ltr";

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

并且我的 html 标记具有值为“ltr”的 dir 属性，但是即使 dir 的值为“ltr”，该变量也会不断被覆盖为“rtl”

如果我把上面的代码改成这个

$dir: "ltr";

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

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

4

2 回答 2

0

我认为您此时不需要考虑全局变量。使用您的代码基础作为开关，使用独特的 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;
}

（就像向前思考的例子......）

于 2021-02-24T14:10:41.887 回答
0

好的，我想出了另一种全局更改变量的方法。sass-loader 允许您在配置文件（在我的例子中是 nuxt.config）中添加作为变量全局传递的附加数据。并且由于配置文件是一个 js 文件，我能够从文件中确定站点的语言，并且毕竟使用 if 条件切换 $dir。所以我做了以下更改：

$dir: 'ltr' !default;

在每个需要该变量的文件中，然后我在捆绑文件中调整了“@use”，如下所示

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

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

于 2021-02-26T12:39:16.520 回答