根据父类更改 CSS 变量 || Sass 和 Tailwind CSS答案

【问题标题】：Changing CSS variable based on the parent class || Sass and Tailwind CSS根据父类更改 CSS 变量 || Sass 和 Tailwind CSS
【发布时间】：2021-04-27 03:41:04
【问题描述】：

我正在使用 Tailwind CSS 设计 Next.js 网站，并尝试使用 CSS (Sass) 变量构建主题切换机制。

我主要有两种模式：

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

所以一般用户有四个选项，相同的顺风颜色会根据动态提供的类而变化。

基于主div类bg-primary应该如下：

没有提供类 => 默认灯光主题，bg-primary = #79A542; // 完美运行
"dark" => 默认深色主题，bg-primary = #03004C; // 完美运行
"minimalist" => 极简主义轻主题，bg-primary = #FEFDF8; // 完美运行
"minimalist dark" => 极简主义深色主题，bg-primary = #0f0f0f; // 不起作用

除了“极简主义黑暗”之外，所有主题组合都有效，bg-primary 是 #03004C 而不是 #0f0f0f 为什么会这样？为什么默认的会覆盖极简的深色主题？

这是我的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

这是我的 tailwind.config.js 文件：

module.exports = {
  purge: ['./pages/**/*.js', './components/**/*.js'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extends: {
    },
    colors: {},
    textColor: {
      primary: 'var(--primary)',
      secondary: 'var(--secondary)',
      third: 'var(--third)',
      inverse: 'var(--inverse)',
      white: 'var(--white)',
      black: 'var(--black)',
    },
    backgroundColor: {
      primary: 'var(--primary)',
      secondary: 'var(--secondary)',
      third: 'var(--third)',
      inverse: 'var(--inverse)',
      white: 'var(--white)',
      black: 'var(--black)',
    },
    fontFamily: {
      'sans': 'var(--font-sans)',
      'mono': 'var(--font-mono)',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这个问题与重用同一个暗类有关吗？我该如何解决这个问题？

【问题讨论】：

标签： css sass next.js tailwind-css

【解决方案1】：

您当前的 CSS 选择器将是 .minimalist .dark，这意味着 dark 类位于 minimalist 类中。你想拥有一个minimalist 类，它也有一个dark 类。在 CSS 中是 .mimimalist.dark，没有空格。

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

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

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

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

【讨论】：