问题描述
: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 等预处理器的答案超出了范围。
解决方法
对长度使用无单位值,然后您可以轻松地为其他值放回 rem
单位
:root {
--length: 10;
}
* {
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 ) * 1rem / 5 );
width: calc(var( --length ) * 1rem);
height: calc(var( --length ) * 1rem);
background-color: #444;
}
/* issue in question below */
hr {
transform: rotate(
calc(
var( --length ) * 4.5deg
)
);
}
<hr>