HTML/CSS - 在多个样式表中保持变量

Question

所以我的网站运行的基本方式是有一个 "base.html" 和 "base.css" 模板，它有一个顶部栏，分别定义了页面颜色、文本颜色等变量，比如这个：

:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}

然后，其他 HTML 个页面以 {% extends "base.html" %} 开头，然后将其内容插入到页面正文中。这些其他页面中的每一个也将导入一个样式表。例如，一个页面使用 table 来显示不同的选项。我希望 table 将其中的项目着色为 var("--bg-primary") 但是当我使用在一个样式表的根目录中定义的变量时，我仍然无法在另一个样式表中使用它，即使最后一页之后extends 将导入两个样式表。有办法吗？

Answer 1

CSS 自定义属性是在外部 CSS 文件中声明还是在同一文件中声明都没有关系。例如

global.css

:root {
--text-primary: #b6b6b6;
--text-secondary: #5f5f5f;
--bg-primary: #23232e;
--bg-secondary: #141418;
}

style.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);
}

test.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 access/set 您的自定义属性。例如

getComputedStyle(element).getPropertyValue("--text-primary");
element.style.setProperty("--text-primary", "#f0f0f0");

HTML/CSS - 在多个样式表中保持变量

HTML/CSS - Keep Variable Across Multiple Stylesheets

html

css-variables