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

Question

: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，并在 calc() 函数的末尾或之后添加 deg。这没有用。

这个问题主要是学术性的，因为它与香草 CSS 本身的限制有关。涉及 SASS 等预处理器的答案超出了范围。

Answer 1

为长度使用无单位值，然后您可以轻松为其他值放回 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>

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

Multiplying rem units by a value to output deg units

html

css

css-transforms

css-variables

css-calc