SCSS中能否实现一个CSS属性值派生自另一个CSS属性

你写的这段代码不能直接实现预期效果，问题出在min-width的写法上：

• 原生CSS的calc()本身不支持直接写属性名当计算参数，calc(width - 10%)属于无效语法，浏览器会直接丢弃这条样式规则。
• 代码里width: inherit的写法是合法的，这部分确实能让.class2继承父元素.class的300px宽度，但和min-width的计算没有关联。

正确实现方式 #

根据你的需求场景，可以选两种方案：

方案1：宽度固定时用SCSS变量复用 #

如果父元素宽度是写死的固定值，直接把宽度抽成SCSS变量，编译时就会生成静态CSS值，兼容性最好：

$base-width: 300px;
.class {
  width: $base-width;
  .class2 {
    width: inherit;
    // 计算逻辑为父宽度减去父宽度的10%，最终得到270px
    min-width: $base-width * 0.9;
  }
}

编译后输出的原生CSS代码：

.class {
  width: 300px;
}
.class .class2 {
  width: inherit;
  min-width: 270px;
}

方案2：需要动态适配时用CSS自定义属性 #

如果需要属性值在页面运行时动态关联（比如父宽度不是固定值，会随窗口变化），SCSS预处理器做不到运行时计算，要改用原生CSS变量实现：

.class {
  --base-width: 300px;
  width: var(--base-width);
  .class2 {
    width: inherit;
    // 这里写calc(var(--base-width) * 0.9)可以避免百分比基准的歧义，直接得到父宽度的90%
    min-width: calc(var(--base-width) - 10%);
  }
}

注意：如果直接写calc(xxx - 10%)，这里的10%基准是当前子元素.class2的宽度，不是父元素宽度，如果你要的是「比父宽度小10%」，直接乘0.9的写法更稳妥，不会出现计算基准不符合预期的问题。

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