如何将React Props传递给SASS变量实现立方体组件动态宽度？

这个问题我之前也碰到过——Sass变量是预编译的，编译后就固定死了，没法直接响应React通过style属性传递的动态宽度。不过咱们可以用**CSS自定义属性（CSS变量）**作为桥梁，把React的动态值和Sass的样式运算结合起来，完美解决这个需求。

具体实现步骤 #

1. 在React组件中传递动态CSS变量

不再直接给width赋值，而是把宽度值传给一个自定义的CSS变量（比如--cube-width），这样组件根元素就能在运行时带上这个动态值：

<Cube style={{ '--cube-width': '100px' }} />
<Cube style={{ '--cube-width': '70px' }} />
<Cube style={{ '--cube-width': '20px' }} />

如果需要同时显式设置立方体的width和height，也可以直接复用这个变量：

<Cube style={{ 
  '--cube-width': '100px',
  width: 'var(--cube-width)',
  height: 'var(--cube-width)'
}} />

2. 在Sass文件中利用CSS变量做运算

在.scss里，我们可以通过var(--cube-width)读取这个动态值，再结合calc()做各种样式运算——比如立方体六个面的尺寸、3D位移距离（这是立方体成型的关键）。同时给变量设置默认值，防止组件没传值时样式失效：

#cube {
  // 设置默认宽度，组件没传值时用这个兜底
  --cube-width: 150px;
  width: var(--cube-width);
  height: var(--cube-width); // 保持立方体为正方形
  position: relative;
  transform-style: preserve-3d; // 开启3D空间，让子元素的3D变换生效

  // 六个面的通用样式
  .cube-face {
    position: absolute;
    width: var(--cube-width);
    height: var(--cube-width);
    background: rgba(255, 90, 90, 0.8);
    border: 2px solid #222;
  }

  // 基于宽度计算3D位移，定位各个面
  .front {
    transform: translateZ(calc(var(--cube-width) / 2));
  }
  .back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
  }
  .right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
  }
  .left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
  }
  .top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-width) / 2));
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-width) / 2));
  }
}

进阶：结合Sass变量做复杂运算 #

如果需要用Sass变量（比如边框厚度、比例系数）和动态宽度结合，可以用Sass的插值语法#{$variable}把Sass变量插入到calc()里，兼顾预编译变量的便捷性和动态值的灵活性：

$cube-border: 2px;
$face-scale: 0.9;

.cube-face {
  // 用Sass变量计算边框后的面尺寸
  width: calc(var(--cube-width) * #{$face-scale} - #{$cube-border} * 2);
  height: calc(var(--cube-width) * #{$face-scale} - #{$cube-border} * 2);
  // 让面在立方体中居中
  left: calc((var(--cube-width) - (var(--cube-width) * #{$face-scale})) / 2);
  top: calc((var(--cube-width) - (var(--cube-width) * #{$face-scale})) / 2);
}

为什么这个方案好用？ #

• 完全原生：不需要额外依赖，用CSS和Sass的原生特性就能实现
• 动态响应：React传递的宽度变化会实时反映到所有依赖该变量的样式上
• 可维护：所有样式运算都集中在.scss文件里，逻辑清晰，方便后续调整

内容的提问来源于stack exchange，提问作者GuillaumeRZ