Question

我想通过使用javascript更改单个自定义变量来在内置于scss中的else / if语句中的两个CSS主题之间切换。

我看到了很多示例，这些示例说明如何通过javascript更改CSS变量中的一种或两种颜色，但是我想仅通过更改$ theme变量来更改网站的整个主题。

检查代码笔：https://codepen.io/roroland/pen/gVWLBm

// Var defaults
$theme: default;
$primary: null;
$warn: null;
:root {
  --theme: #{$theme};
}

// If theme is 'default' use this
@if ( $theme == "default") {
  $primary: orange;
  $warn: purple;
}
// If theme is 'other' use this instead
@elseif($theme == "other") {
  $primary: black;
  $warn: blue;
}

p {
  display: block;
  padding: 2rem;
  color: $primary;
  background: $warn;
}

JS

document.documentElement.style.setProperty('--theme', "other");

如果我尝试更新$ theme则不起作用，我尝试使用和不使用插值，将主题var设置为“ null”等。它只是忽略了JS指令。

有人可以解释为什么不起作用吗？谢谢

Answer 1

我认为您正在尝试做的事情，无法完成。

SCSS是在服务器端运行的CSS预处理器。它将被编译成CSS，然后在客户端（浏览器）中呈现。并且一旦将其编译为CSS，所有的SCSS变量都将消失（因为浏览器只能呈现CSS）。

您正在编写的JS正在浏览器（客户端）中执行。

因此，如果您希望完成此操作，则需要

将类分配给元素并设置其样式。然后，使用JS更改类

document.getElementById("MyElement").className = "other-theme";
document.getElementById("MyElement").className = "default-theme";

在CSS中，

.other-theme{
color: orange;
background: purple;
}

.default-theme{
color: black;
background: blue;
}

您可以使用SCSS生成CSS样式。

或者，您可以使用AJAX的方法将请求发送到服务器并获取更新的样式表。

Answer 2

这是CSSVariables（动态）的工作，与Sass变量（静态）不同，它在运行时起作用。

/* toggle theme class */
addEventListener('click', e => {
  document.documentElement.classList.contains('other') ?
    document.documentElement.classList.remove('other') :
    document.documentElement.classList.add('other');
})

/* default theme */
:root {
  --primary: orange;
  --warn: purple;
}

/* other theme */
:root.other {
  --primary: black;
  --warn: blue;
}

p {
  display: block;
  padding: 2rem;
  /* use theme colors */
  color: var(--primary);
  background: var(--warn);
}

<h2>Click to toggle theme class</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dolorem quas quod eaque voluptatem error, rem vero non. Eveniet maxime saepe fugiat tenetur dignissimos enim, provident earum illo quasi fugit?</p>

Answer 3

我认为您应该通过添加事件侦听器并切换类（具有两个不同的类）来实现javascript而不是复杂的CSS

此链接可能会帮助

https://www.w3schools.com/howto/howto_js_toggle_class.asp

为什么不能更新CSS变量名称以应用不同的颜色主题？

3 个答案: