Question

CSS3中是否有任何方法可以创建全局变量并在各种类中使用它？

--divHeight: 100px;
.div1 {
    height: calc(var(--divHeight) + 10px);
    width: 100px;
    background-color: red;
}
.div2 {
    height: calc(var(--divHeight) - 10px);
    background-color: red;
}

我试过这个并不行。有办法吗？我需要这个的原因是因为我经常需要设计具有标题和内容部分的页面。标题具有固定的高度，内容部分应占据剩余高度。例如

<!DOCTYPE html>
<html>
  <head>
    <style>
       .header {
         height: 70px;
         background-color: red;
       }
       .content {
         height: calc(100vh - 70px);
         background-color: green;
       }
     </style>
   </head>
   <body>
      <div class="header">
        Hello
      </div>
      <div class="content">
        Hello
      </div>
  </body>
</html>

因此，将来如果标题的高度必须更改为100px，则还必须更改内容部分的高度。

我知道我们可以通过JavaScript实现这一点，但我想知道是否有纯CSS3方式。

Answer 1

这是可能的，只需在根元素上声明变量即可。事实上，这已成为变量在一段时间内发生的唯一支持位置。您可以阅读有关变量on MDN的更多信息。

:root {
  --divHeight: 100px;
}

.div1 {
    height: calc(var(--divHeight) + 10px);
    width: calc(var(--divHeight) + 10px);
    background-color: red;
}

.div2 {
    height: calc(var(--divHeight) - 10px);
    width: calc(var(--divHeight) - 10px);
    background-color: blue;
}

<div class="div1"></div>
<div class="div2"></div>

CSS3`calc`变量可以全局共享吗？

1 个答案: