在样式组件中使用CSS变量+媒体查询

Question

我正在尝试从样式化组件中模仿类似于以下内容的内容。下面的操作是允许我调用具有各种属性的var(--spacing)，而不必担心页面调整大小时处理查询，因为变量已经独立地处理了查询。

:root {
  --spacing: 32px;
}

@media (min-width: 1024px) {
  :root {
    --spacing: 64px;
  }
}

@media (min-width: 1440px) {
  :root {
    --spacing: 80px;
  }
}

.example {
  width: 100px;
  height: 100px;
  margin: var(--spacing);
}

这在CSS / SASS中很好用，但是我想知道是否可以对样式化的comonenet做类似的事情？