Question

sass的新手我遇到了如何通过用户交互启用网站主题的动态更改 - 让我们说一个黑暗和轻松的主题 - 的问题。我用作基础的模板（coreui）有一个_custom.scss文件，其中定义了各种变量

...
$navbar-bg: #fff;
...

这些变量的值需要根据用户对主题的选择动态设置，我不知道如何完成这些操作。任何指针如何实现这一点将非常感激。

Answer 1

SASS是一个预处理器，这意味着它基本上被编译成常规CSS，然后运送到客户端。如果您想更改主题，则必须使用javascript动态加载不同的样式表。

<案例1

如果您希望用户在多个预先打包的主题之间进行选择。这可以通过多个＆＃34;主题＆＃34;轻松完成。样式表导入您的样式的各个部分。首先导入不同的颜色，然后导入sass的主体。例如：

theme1.sass：

@import 'theme1';
@import 'base';
@import 'other';

theme2.sass：

@import 'theme2';
@import 'base';
@import 'other';

然后在javascript中，您可以删除旧样式表，并在用户执行更改主题所需的任何内容时添加新样式表。例如，在按钮的onclick中你可以放置：

document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");

最好小心谨慎并将元素放在文档的head中，但这是一个很好的起点。使用Jquery可以看起来更好看，但我并不想假设你有这个。

<案例2

如果您希望用户动态更改单个元素颜色的颜色，则可能需要查看CSS Variables。 IE / Edge目前的支持很糟糕，但它非常有趣。然后，当用户更改字段时，您可能只是在页面某处的<style>标记中更改css变量，它应该在文档中传播。

如果您想获得更多浏览器支持，那么我认为最好的方法就是确定答案。这个让您只需更改变量，而不必重置使用该变量的每个元素样式。

Answer 2

我认为你有两个选择。

选项1）通过运行命令serverside为用户生成新的CSS文件，每当进行更改时重新编译样式。这可能非常耗费资源，可能不推荐。

选项2）获取您想要访问的变量，找到引导源中提到的变量，并生成文件或在样式表包含在模板中后内联这些样式。

因此，对于您的示例，根据您正在编写的语言或模板（这是一个小例子），您可以在模板的头部内联以下内容：

stam = ThisWorkbook.Path & "\" & StBestand

如果不知道您正在使用哪些框架/语言/基础设施，很难告诉您如何做到这一点。

如果你正在使用Twig＆amp;例如，PHP可以向模板发送一个<style> .navbar { background-color: {{ user_theme.navbar-bg | default('#eeeeee') }} } </style>对象，并且包含一个包含所有需要使用默认值修改的样式的包含文件。

Bootstrap 4 Sass - 动态改变主题

2 个答案: