基于父类| | Sass和Tailwind CSS更改CSS变量

我正在使用Tailwind CSS设计Next.js网站的样式，并尝试使用CSS（Sass）变量构建主题切换机制

我主要有两种模式：

• 默认模式：包括明暗主题
• 极简主义模式：也包括浅色和深色主题，但颜色要少得多（主要是黑色和白色）

因此，用户通常有四个选项，相同的顺风颜色会根据动态提供的类进行更改

基于主div类

bg主
应如下所示：


没有提供类=>默认灯光主题，
bg primary=#79A542//工作正常

“黑暗”=>默认的黑暗主题，
bg primary=#03004C//工作正常

“极简主义”=>极简主义灯光主题，
bg primary=#FEFDF8//工作正常

“极简黑暗”=>极简黑暗主题，
bg primary=#0f0f//不起作用


除了“极简黑暗”之外，所有的主题组合都有效，背景小学是#03004C而不是#0f0f为什么？为什么极简黑暗主题会被默认主题覆盖

这是我的
globals.scss
文件配置：

@tailwind base;
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Montserrat&family=Rakkas&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&family=Lateef&display=swap');

:root {
/*default mode*/
  --primary:  #79A542;
  --secondary: #CFF0A5;
  --third: #CFF0A5;
  --inverse: #0f0f0f;
  --font-mono: 'Roboto Mono',monospace;
  --font-sans: 'Montserrat', sans-serif;
  & .arabic {
    --font-mono: 'Amiri', serif;
    --font-sans: 'Rakkas', cursive;
  }
  & .dark {
    --primary: #03004C;
    --secondary: #6A1497;
    --third: #E61D6D;
    --inverse: #7C54E1;
  }
}


.minimalist {
/*Minimalist mode*/
  --third: #98999B;
  --inverse: transparent;
  --primary: #FEFDF8;
  --secondary: #0f0f0f;
  & .dark {
    --primary: #0f0f0f;
    --secondary: #FEFDF8;
  }
  & .arabic {
    --font-mono: 'Aref Ruqaa', serif;
    --font-sans: 'Lateef', cursive;
  }
}

@tailwind components;
@tailwind utilities;


这是我的app.js文件：

import '../styles/globals.css'
import Nav from '../components/Nav'
import { useState} from 'react'

function MyApp({ Component, pageProps }) {
  const [attributes, setAttributes] = useState("minimalist dark") // Themes are changed here

  return (
    <div className={attributes}>
      <main className="bg-primary">
        <Nav/>
      </main>
    </div>
  )
}

export default MyApp

这个问题与重用同一个黑暗类有关吗？如何解决此问题？
您当前的CSS选择器将是
.minimalist.dark
，这意味着
minimalist
类中的
dark
类。你想要一个
极简主义的
类，它也有一个
黑暗的
类。在CSS中是
.mimimalist.dark
，没有空格

在SCSS中，需要删除父选择器（
&
）和类名之间的空格，如下所示：

.minimalist {
  --third: #98999B;
  --inverse: transparent;
  --primary: #FEFDF8;
  --secondary: #0f0f0f;

  &.dark {
    --primary: #0f0f0f;
    --secondary: #FEFDF8;
  }
}

默认的
.dark
类工作正常，因为它位于
:root
类中

.minimalist {
  --third: #98999B;
  --inverse: transparent;
  --primary: #FEFDF8;
  --secondary: #0f0f0f;

  &.dark {
    --primary: #0f0f0f;
    --secondary: #FEFDF8;
  }
}