Question

我偶然发现了CSS Variables，我想知道是否可以在同一风格中为其分配另一个属性的值：

inspect

没有迹象表明这可以在文档中完成，但我找不到任何声明只能在声明时分配值的任何内容。

如果你想知道我为什么要这样做：

.container {
    width:10px;
    --container-width: width; /*Attempting to assign the value of width to the variable*/
}

Answer 1

由于我不知道任何方法可以轻松地将CSS变量链接到另一个，所以我建议你做那样的事情：

＆＃13;

.container {
  --container-width: 100px;
  width: var(--container-width);
  box-shadow: 0 0 0 calc(var(--container-width) * 0.1) rgba(0, 0, 0, 0.1);
  /* The below is only added to have a nice example */
  height: 40px;
  margin: 20px;
  border: 1px solid black;
}

＆＃13;

<body>
  <div class="container">
  </div>
</body>

＆＃13;

这样，width和box-shadow都将取决于相同的CSS变量。

我希望它有所帮助。

Answer 2

不，你不能做那个AFAIK 显而易见的用途是：

:root {
    --container-width: 40px; /* some default, if necessary */
}
.container {
    --container-width: 10px;
    width: var(--container-width);
    box-shadow: 0 0 0 calc(var(--container-width) * 0.1) rgba(0,0,0,0.1);

}

Answer 3

一个有效的想法是将您想要作为基础的值设置为自定义属性

div {
  --container-width: 100;
  --shadow-width: calc(var(--container-width) * 0.1);
  box-shadow: 0 0 0 calc(var(--shadow-width) * 1px) lightgreen;
  width: calc(var(--container-width) * 1px);
  height: calc(var(--container-width) * 0.5px);
  margin: 40px;
  border: 1px solid black;
}

.container2 {
  --container-width: 200;
}

<div class="container">
</div>
<div class="container2">
</div>

CSS自定义属性可以保存另一个属性的值吗？

3 个答案: