如何在css中定义全局变量

Posted 2023-03-06

【中文标题】如何在css中定义全局变量

【英文标题】：How to define global variables in css

【发布时间】：2018-01-27 05:04:28

【问题描述】：

我想在一个 css 文件中定义全局变量，并在其他 css 文件中使用这些变量。

这可能吗？

Global.css：

:root 
    --main-color: #192100;
    --main-background: #89b66b;


html, body 
    min-height: 100%;
    width: 100%;
    font-family: Arial;
    color: var(--main-color);

SomeFile.css：

.some-rule 
    display: table;
    border-radius: 12px;
    border: 4px solid var(--main-color);
    padding-left: 10px;
    padding-right: 10px;
    color: var(--main-color);

Html：（Global.css 如果在 SomeFile.css 之前引用）

<link href="Global.css" rel="stylesheet" type="text/css" />
<link href="SomeFile.css" rel="stylesheet" type="text/css" />

【问题讨论】：

不行。你需要像 sass 或 less 这样的预处理器来实现这样的事情

最近遇到nicolasgallagher.com/custom-css-preprocessing

等待 CSS4 或使用 sass

为什么不把一个根类添加到你想要的元素中呢？

【参考方案1】：

你不能用 CSS 做到这一点。试试像 Less 或 Sass 这样的 CSS 预处理器。

less.css sharing variables across files

SASS - use variables across multiple files

【讨论】：

暂时使用@import。但我会阅读更多关于 Less 的内容，并且将来可能会使用它

【参考方案2】：

CSS 本身不使用变量。但是，您可以使用另一种语言，例如 SASS 或 LESS

【讨论】：

是的，但请检查浏览器兼容性表。您真的不想使用它