如何使用SASS动态切换颜色主题？
How to dynamically switch color themes using SASS?
我正在尝试为一个项目实现可切换的主题，它是一个 Mendix 项目，但我们假设它是一个网站。
- 有很多不同的页面，每个页面上都有不同的元素。
- 它们的所有样式都写在SASS中。页面和元素使用来自一个单独的 SASS 文件的值和变量 - variables-1.
- 我有第二个 SASS 文件，其中包含相同的变量但不同的值 - variables-2.
问题：
我需要单击按钮更改网站的颜色主题。所以基本上我需要所有元素在我单击按钮时从不同的变量集中获取颜色。
我在这里看到两个选项：
编译 2 css 个文件并在它们之间切换：link 所有 sass 个文件到 variables-1，编译 CSS 文件，然后 link 所有 sass 文件到 variables-2，编译第二个 css 文件。单击按钮即可在它们之间切换。
在此选项中，颜色不会动态分配，每次我进行更改时，我都必须手动 link 每个 sass 文件到不同的变量，或更改变量值，并重新编译一切。另外，我将无法继续从事该项目并同时切换主题。
在 mixins 中预定义颜色主题，像 this article 一样为每个主题编译 css classes，并使用一些自定义的 js 逻辑来分配相应的 classes 到元素。
很可能行不通，因为项目中的元素太多，并且太复杂而无法对每个元素进行更改 class。
我该如何解决这个问题？
您无法在浏览器中动态更改 sass 变量。这里有更详细的解释：
Changing variables values scss
一个可能的解决方案是在表示主题的正文中添加或删除 class。那么比如body有class"dark-theme"，背景色为黑色等等
我正在尝试为一个项目实现可切换的主题，它是一个 Mendix 项目，但我们假设它是一个网站。
- 有很多不同的页面，每个页面上都有不同的元素。
- 它们的所有样式都写在SASS中。页面和元素使用来自一个单独的 SASS 文件的值和变量 - variables-1.
- 我有第二个 SASS 文件，其中包含相同的变量但不同的值 - variables-2.
问题：
我需要单击按钮更改网站的颜色主题。所以基本上我需要所有元素在我单击按钮时从不同的变量集中获取颜色。
我在这里看到两个选项：
编译 2 css 个文件并在它们之间切换：link 所有 sass 个文件到 variables-1，编译 CSS 文件，然后 link 所有 sass 文件到 variables-2，编译第二个 css 文件。单击按钮即可在它们之间切换。
在此选项中，颜色不会动态分配，每次我进行更改时，我都必须手动 link 每个 sass 文件到不同的变量，或更改变量值，并重新编译一切。另外，我将无法继续从事该项目并同时切换主题。
在 mixins 中预定义颜色主题，像 this article 一样为每个主题编译 css classes，并使用一些自定义的 js 逻辑来分配相应的 classes 到元素。
很可能行不通，因为项目中的元素太多，并且太复杂而无法对每个元素进行更改 class。
我该如何解决这个问题？
您无法在浏览器中动态更改 sass 变量。这里有更详细的解释：
Changing variables values scss
一个可能的解决方案是在表示主题的正文中添加或删除 class。那么比如body有class"dark-theme"，背景色为黑色等等