:root {
--length: 10rem;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
hr {
border-style: none;
border-radius: calc( var( --length ) / 5 ); /*dividing by a unitless number works*/
width: var( --length );
height: var( --length );
background-color: #444;
}
/* issue in question below */
hr {
transform: rotate(
calc(
var( --length ) * 4.5deg
)
);
}<hr>将等于 var( --length ) 的 10rem 乘以 4.5 得到 45 是 calc() 函数的期望结果。主要问题是获取以度为单位注册的 calc() 函数的结果。
本质上，我将 10rem 乘以 4.5deg，得到所需的输出 45deg。
已尝试使用 4.5 的无单位值代替 4.5deg 并在 deg 函数的末尾或之后添加 calc()。这不起作用。
这个问题主要是学术性的，因为它与 vanilla CSS 本身的限制有关。涉及 SASS 等预处理器的答案超出了范围。