在 Nuxt 颜色模式下使用 SCSS 变量
Posted
技术标签:
【中文标题】在 Nuxt 颜色模式下使用 SCSS 变量【英文标题】:Using SCSS variables with Nuxt color mode 【发布时间】:2020-12-23 21:08:36 【问题描述】:我正在尝试将 Nuxt 颜色模式与我现有的 SCSS 样式表一起使用。到目前为止,我已经为整个应用程序中的所有颜色使用了 $primary 和 $secondary 等变量。我想使用nuxt颜色模式来改变主题。示例here 显示了一组 CSS 变量,这些变量根据 html 元素的类而变化,例如(.dark-mode, .light-mode)
如何使用 SCSS 应用此逻辑(根据 html 元素的类更改颜色变量)?
我试过了:
.light-mode
$primary: #196b69;
$accent: #e69496;
...
.dark-mode
$primary: red;
$accent: blue;
...
还有一点:
$themes: (
light-mode: (
primary: #196b69,
accent: #e69496,
...
),
dark-mode: (
primary: red,
accent: blue,
...
)
);
但它没有奏效。 在此先感谢您提供的任何帮助或对有用文档的参考! :)
【问题讨论】:
【参考方案1】:.light-mode
--primary: #196b69;
--accent: #e69496;
...
.dark-mode
--primary: red;
--accent: blue;
...
$primary: var(--primary);
$accent: var(--accent);
工作,除了我在哪里实现了transparentize($color,$opacity)
。我的解决方法是使用opacity
作为单独的规则。
代表 OP 添加
【讨论】:
以上是关于在 Nuxt 颜色模式下使用 SCSS 变量的主要内容,如果未能解决你的问题,请参考以下文章
Nuxt 项目中的 Tailwind CSS 尝试使用 SCSS 变量会引发“未知单词”错误