CSS中有变量这样的东西吗？

我有很多款式。根据用户所在页面使用的整个块。但我想把它浓缩成一个部分。例如，下面是CSS块的一个片段：

h1.index { color: var(--index-page-color); }
p.index { color: var(--index-page-color); }

还有一些类似的样式，总共大约30行，每个页面都有自己的块：索引、连接、访谈、朋友、商品、订阅等。这可能会变得庞大。我想做的是一些变量，比如：

h1.var(--page-name) { color: var(--var(--page-name)-page-color); }
p.var(--page-name) { color: var(--var(--page-name)-page-color); }

---

将所有CSS缩减为一个块。这可能吗？如果可能，语法是什么？

将每个页面包装在自己的div容器中，然后根据div容器名称生成不同的代码，并在一个css页面中完成所有操作

像这样：

主页

<div class="homepagecontainer">
All your page content goes here
<div>

---

对每个页面都这样做，那么每个页面都有不同的css

这在css中是不可能的，看看SASS/LESS

.homepagecontainer h1{
Color:black;
}

.aboutuscontainer h1{
Color:blue;
}