HTML/CSS - 在多个样式表中保持变量
The*_*heo 3 html css-variables
所以我的网站功能的基本方式是有一个“base.html”和“base.css”模板，它们有一个顶栏并分别定义页面颜色、文本颜色等变量，如下所示：
:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
然后，其他 HTML 页面开始并将{% extends "base.html" %}其内容插入到页面正文中。其他每个页面也将导入样式表。例如，一页使用表格来显示不同的选项。我希望该表中的项目具有颜色，var("--bg-primary")但是当我使用一个样式表根目录中定义的变量时，我仍然无法在另一个样式表中使用它，即使扩展后的最后一页将导入两个样式表。有没有办法做到这一点？
CSS 自定义属性是否在外部 CSS 文件或同一文件中声明并不重要。例如
全局.css
:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
样式.css
.primary {
color: var(--text-primary);
}
.secondary {
color: var(--text-secondary);
}
.bg-primary {
background-color: var(--bg-primary);
}
.bg-secondary {
background-color: var(--bg-secondary);
}
测试.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="global.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="primary">foo</div>
<div class="secondary">bar</div>
<div class="bg-primary">baz</div>
<div class="bg-secondary">bat</div>
</body>
</html>
结果：
因此，它必须与导入 css 的顺序有关，或者与页面的设置方式有关。
所以回答你的问题：有办法做到这一点吗？是的 - 这就是它们开箱即用的工作方式。
另外，您还可以通过 javascript 访问/设置您的自定义属性。例如
getComputedStyle(element).getPropertyValue("--text-primary");
element.style.setProperty("--text-primary", "#f0f0f0");
| 归档时间： |
|
| 查看次数： |
1754 次 |
| 最近记录： |