[英]I want to perform calculation on a variable in CSS. Is there a way to do this WHITHOUT preprocessors or JavaScript? [ACCEPTED]
I want to do something like this.我想做这样的事情。 I want to make use of a single varible for multiple elements that have different values for the same property.
我想对同一属性具有不同值的多个元素使用单个变量。
like this vvv喜欢这个vvv
:root {
--brd_rad: 2rem;
}
#something {
border-radius: var(--brd_rad);
}
#other-thing {
border-radius: calc(var(--brd_rad) + 1); /*obviously this doesn't work */
}
You need a unit in the value you're adding in the calc
.您在
calc
中添加的值需要一个单位。 Is it meant to be 1px
or 1rem
or 1%
?它的意思是
1px
或1rem
还是1%
?
:root { --brd_rad: 2rem; } #something { border-radius: var(--brd_rad); border:1px solid blue; height:100px; } #other-thing { border:1px solid red; height:100px; border-radius: calc(var(--brd_rad) + 1rem); }
<div id="other-thing"></div> <div id="something"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.