css - 有没有办法在 SCSS 中有条件地替换全局变量?
问题描述
我最近发现了“prefers-color-scheme”媒体查询,并发现大多数常见浏览器的较新版本都与它兼容。
我想制作一些 SCSS 代码来生成全局变量以根据“prefers-color-scheme”导出值,以避免重复“主题类”。
$schemeColor: #eeeeee !default;
$reverseColor: #333333 !default;
$textColor: #000000 !default;
@media (prefers-color-scheme: dark){
$schemeColor: #333333 !global;
$reverseColor: #eeeeee !global;
$textColor: #FFFFFF !global;
}
@media (prefers-color-scheme: light) {
$schemeColor: #eeeeee !global;
$reverseColor: #333333 !global;
$textColor: #000000 !global;
}
当我在这段代码之后使用其中一个变量时,无论首选配色方案是什么,存储在变量中的值将是最后写入的值
(此处:在 中设置的值@media (prefers-color-scheme: light)
)。
我试图在媒体查询中创建类。
当我这样做时,媒体查询中声明的类会根据颜色方案正确应用,但变量会继续存储它们设置的最后一个值。
解决方案
据我所知,这不能通过 SCSS 是一个预处理器这一简单事实来完成,因此,您在 SCSS 中生成的代码将转换为 CSS,并且您使用的所有变量都将转换为值。
如果您想要变量并按规则更改它们,则应使用 CSS 变量,如下所示:
:root {
--main-bg-color: coral;
}
@media (prefers-color-scheme: dark){
:root {
--main-bg-color: red;
}
}
.element{
background-color: var(--main-bg-color);
}
推荐阅读
- yii2 - 如何设置 swiftmailer 模板的路径
- linux - 无法在 bash 中分配变量。获取命令未找到错误
- c++ - 在 ++iter = iter 期间会发生什么?
- java - 是否可以让用户使用扫描仪输入,然后将字符输入设置为字符串以进行额外编码?
- javascript - CKEditor 关注 CSS 变化
- sql - 使用 oracle sql 预处理文本
- c# - 尝试十进制。从两位小数取整结果?特性
- php - 存储库 webhook 给了我空的 json
- git - 为什么 Git 不为我的 VPS 上的克隆存储库引入新的更改?
- javascript - 如何根据纯 Javascript 中的语言环境确定一周是从星期一还是星期日开始?