sass - Scss 主题依赖于带有预定义变量的主体类
问题描述
我想要一个复选框,当您单击它时,它会将类添加到正文标签,例如“深色主题”或“浅色主题”。问题是在我为所有元素设置样式后出现了主题要求,现在更改每个元素样式将是自杀。请帮忙
$color-white: #ffffff;
$color-black: #000000;
// Dark
$color-green: #328332;
$color-red: #a23232;
$color-background-dark: #212734;
$color-backgound-light: #31394c;
$color-text: rgba(255, 255, 255, 0.3);
$color-text-darker: #B8BCC6;
$color-text-active: #ffffff;
$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;
$color-button-secondary: rgba(255, 255, 255, 0.3);
$color-button-secondary-text: rgba(255, 255, 255, 0.3);
$color-button-secondary-active: #B8BCC6;
$color-button-secondary-text-active: #B8BCC6;
$color-line: #3d465e;
$color-line-darker: rgba(255, 255, 255, 0.3);
$color-table-dark-row: #2C3345;
// Light
$color-green: #006400;
$color-red: #8b0000;
$color-background-dark: #f5f5f5;
$color-backgound-light: #ffffff;
$color-text: #b3b3b3;
$color-text-darker: #808080;
$color-text-active: #000000;
$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;
$color-button-secondary: #b3b3b3;
$color-button-secondary-text: #b3b3b3;
$color-button-secondary-active: #808080;
$color-button-secondary-text-active: #808080;
$color-line: #f5f5f5;
$color-line-darker: #b3b3b3;
$color-table-dark-row: #FAFAFA;
解决方案
您可以为具有不同颜色(和其他可编辑内容)的每个主题编译两次 css 文件。
包含所有“轻”变量的文件light-theme.scss
:
$color: black;
$background: white;
包含所有“暗”变量的文件dark.scss
:
$color: white;
$background: black;
包含所有样式的文件_style.scss
:
@import '_button.scss'; // If you are importing something
@import '_header.scss';
element{
color: $color;
background: $background;
}
以及生成所有主题的文件themes.scss
:
.light {
@import 'light-theme';
@import '_styles';
}
.dark {
@import 'dark-theme';
@import '_styles';
}
CSS输出:
.dark element {
color: white;
background: black;
}
.light element {
color: black;
background: gray;
}
推荐阅读
- css-selectors - 如何选择所有元素的偶数项
- image - Rust:使用 image-rs 将 JPEG 图像编码为 PNG
- javascript - SuiteScript2.0 请加值到金额
- javascript - 如何访问在javascript中添加到另一个数组元素的数组元素
- typescript - typescript eslint - 类型 x 缺少类型 x 的以下属性
- youtube-api - 我想延长 YouTube Data API 的配额。有没有办法计算成本?
- c++ - 为什么 char 可以在 std::array 中初始化为 nullptr,但不能单独初始化?
- python - 如何计算运行特定 Python 程序需要多少 CPU、RAM、能量?
- mongodb - 在 kubernetes 上添加 mongoDB statefulset 成员问题
- javascript - ESLint 抱怨从未使用过局部状态变量 no-unused-vars