将 rem 单位乘以一个值以输出 deg 单位

如何解决将 rem 单位乘以一个值以输出 deg 单位

: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>