根据 dir scss 为 html 标签添加样式

问题描述

在我的 nuxt 项目中，我使用 dart-sass 和一个名为 constants 的文件来确定名为 $dir 的变量的值，该变量控制某些 mixin 的功能。如果 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”，这意味着这两种样式都被应用并且只是相互覆盖，所以我错过了什么？

解决方法

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

（作为思考的例子......）

,

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

$dir: 'ltr' !default;

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

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

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