angular - ionic 2 : Change a sass variable dynamically

Question

我使用 Ionic 2，我想动态更改我的 scss 文件上的变量。

我有这个变量:

$tab-image : url('http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg');

我想在 .ts 文件中更改另一个网址以最终更改图片。我想在组件或提供程序中更改它。

此外，我想用类似的方式替换网址:

data:[my-file-type]';base64,[my-file-content]

问:有可能吗？

问:我该怎么做？

Answer 1

SASS 是一个预处理处理器，这意味着一旦处理完毕(在渲染网页之前)，您就无法重新处理它。

您是否正在使用 $tab-image 作为背景图像？

您可以使用NgClass为了动态地添加/删除一个额外的CSS类到你的组件/节点。这个具有不同的样式，覆盖任何值(例如 background-image)。

您可以在 CSS 中使用 url(data:image/png;base64,[...]。请注意，IE7 和 8 不支持此语法(IE8 支持，但带有一个非常小的内容)。(注意:image/png 只是为了示例。根据您的文件使用适当的 MIME 类型)。