Question

我试图仅通过改变颜色来在夜间模式和日间模式之间切换。我的def secure_str(d): x={} x.update(d) x['password']=len(x["password"])*"*" return x中有一些基色变量，它们遍布我的网站。我使用React在项目的第一个div处的'night-mode'和'day-mode'之间切换className。
我试图将变量包装在提到的类名中，但结果是没有其他文件可以访问变量。因此，我希望有一个解决方案，我可以使用夜间模式文件和日间文件，并在它们之间切换。

正如我现在看到的，问题在于我无法将$变量或包装在类名中，这使得很难知道选择了什么模式。我正在寻找一个不包含jQuery的解决方案（我有一个全局存储的变量，如果最终成为最佳解决方案，可以用于javascript引用）。

Answer 1

您无法在运行时切换scss文件，因为它们已经编译为css。

我会使用CSS自定义属性（有时称为CSS变量）而不是纯Sass变量。

示例：

var allowed = true;
var last_key;
$(document).keydown(function(e) {
  if (e.repeat != undefined) {
    allowed = !e.repeat;
  }
  if (!allowed) return;
  allowed = false;

  if (e.keyCode == last_key){
     return;
  }

  if (controlsEnabled) {
    if (e.keyCode == 38) {
      allowed = true;
      verticalSlideDown();
      console.log("pressed key for Down : " + e.keyCode);
    }

    if (e.keyCode == 40) {
      allowed = true;
      verticalSlideUp();
      console.log("pressed key for Up: " + e.keyCode);
    }
    if (e.keyCode == 13) {
      allowed = true;
      var div = $(".scroll-inner-container");
      console.log("pressed key for stop : " + e.keyCode);
      div.stop();
    }

    last_key = e.keyCode;
  }

});

根据一天中的时间，使用javascript切换.night-mode。

您当然可以从scss文件中的Sass变量中提供CSS自定义属性：

:root {
  --background: lightblue;
}


.night-mode {
  --background: darkblue;
}

.component {
  background-color: var(--background);
}

切换scss变量文件

1 个答案: