根据 Laravel 中的数据库值动态更改 SAAS 变量

Question

我也想更改网站的背景和其他颜色。我的网站上有一个名为"设置"的模块。基本上，我正在保存该模块中的颜色。我正在使用Laravel混合来编译scss文件。

SAAS files
1) _variable.scss (All variables define here like $primary-color, $secondary-color etc.)
2) _common.scss
3) app.scss

我想动态$primary-color & $secondary-color.

我已经尝试了许多作曲家包来做这些事情，但没有取得任何成功。 我试过这个：https://leafo.net/scssphp/

Answer 1

CSS 变量呢？大多数现代浏览器都支持它：https://caniuse.com/#feat=css-variables。

您所需要的只是使用设置模块中的自定义变量在主模板中注入样式。

首先，将设置传递到边栏选项卡视图：

$settings = Settings::getForCurrentUser(); // or something like that.
return view('layout.base', compact('settings'));

在layout.base中添加样式，并将变量传入：

<style>
root {
--primary-color: {{ $settings['primaryColor'] }};
--secondary-color: {{ $settings['secondaryColor'] }};
--header-color: {{ $settings['headerColor'] }};
/* etc. */
}
</style>

要访问 css 变量，您需要调用var()函数。将 scss 变量从$primary-color更改为：

app.scss：

button {
background-color: var(--primary-color);
}
button.secondary {
background-color: var(--secondary-color);
}

此解决方案的缺点是不能使用像lighten(var(--primary-color), 15%)这样的 scss 内置函数，因为它们不存在 scss 编译器 - 您只能在客户端使用它。

Answer 2

使用 JavaScript 将存储在数据库中的样式/CSS 注入到应用程序中通常更容易。

如果这不是一个选项，您应该能够将 CSS 作为 CSS 代码块存储在数据库中，然后在文档头部的样式标记中输出 CSS。

将数据库存储样式编译到 SASS 中是一种选择，但需要一个适配器来允许您的编译脚本/webpack 访问您的数据库。