如何在CSS中定义全局变量

Question

我想在一个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 ：（ 如果在SomeFile.css之前引用，则为Global.css ）

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

Answer 1

您不能使用CSS做到这一点。 尝试使用CSS预处理器，如Less或Sass 。

less.css在文件之间共享变量

SASS-在多个文件中使用变量

Answer 2

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