样式组件使用计算功能

Question

我觉得这应该不会太难，但经过一番谷歌搜索后我似乎无法弄清楚。我正在尝试根据带有另一个 scss 变量的计算函数设置项目的宽度。就像这里显示的宽度属性一样（这不起作用）：

const IconWrapper=styled.div`
  width: calc(50px - var(_someWidthVariable));
  display: flex;
  flex-direction: column;
`;

变量 (

_someWidthVariable

) 通常以 rem 为单位设置，例如

1rem

。

这可能吗？你怎么做到这一点？另外，我现在使用了一些样式组件，但不是很多，而且主要只是用于直接设置值，所以我可能会遗漏一些明显的东西。

Answer 1

要使用 $variables 任何属性 calc():

HTML：

<div></div>

SCSS：

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}