SCSS宽度计算疑问：CSS中(100% - 60px)/2的含义求解

嘿，我来帮你拆解这两个问题，都是CSS开发里很常见的场景～

首先要明确：原生CSS里直接写这个表达式是无效的，它必须被包裹在calc()函数中才能生效，也就是正确写法是width: calc((100% - 60px)/2);。

这个表达式的逻辑很直观：

1. 先取父元素的100%宽度（也就是当前元素所在容器的满宽）
2. 从中减去60px的固定值（通常是预留的间隙、边距，或者旁边固定宽度元素的总宽度）
3. 把剩下的空间平均分成2份，作为当前元素的宽度

举个常见的使用场景：父容器里有两个并列的子元素，我们希望它们平分容器宽度，同时中间留60px的间隙。这时候给每个子元素设置width: calc((100% - 60px)/2);，再给其中一个子元素加margin-left: 60px;，就能完美实现这个布局。

SCSS作为CSS预处理器，提供了更灵活的计算方式，主要有几种常用方案：

1. 直接结合calc()与变量使用 #

因为SCSS无法在编译时解析百分比（百分比依赖父元素的实际宽度，属于运行时计算），所以涉及不同单位混合运算时，还是要借助calc()，但可以结合SCSS变量提升复用性：

// 定义可复用的变量
$item-gap: 60px;

.parent-container {
  width: 100%;
  
  .child-item {
    // 使用插值#{}把变量注入calc表达式
    width: calc((100% - #{$item-gap}) / 2);
    margin-right: $item-gap;
  }
  
  // 清除最后一个元素的右边距
  .child-item:last-child {
    margin-right: 0;
  }
}

2. 纯SCSS算术运算（仅适用于单位一致的场景） #

如果计算的数值单位统一（比如都是px或都是百分比），可以直接用SCSS的原生算术运算，它会在编译时直接计算出结果：

$base-width: 200px;
$padding: 20px;

.child-item {
  // 编译后会变成width: 160px;
  width: $base-width - $padding * 2;
}

3. 封装混合宏（Mixin）复用布局逻辑 #

如果经常需要实现“平分宽度+间隙”这类布局，可以把逻辑封装成混合宏，方便多处调用：

@mixin split-column($count: 2, $gap: 0) {
  width: calc((100% - #{$gap} * ($count - 1)) / $count);
}

// 调用示例：2列，间隙60px
.two-column-item {
  @include split-column(2, 60px);
  margin-right: 60px;
  
  &:last-child {
    margin-right: 0;
  }
}

// 调用示例：3列，间隙20px
.three-column-item {
  @include split-column(3, 20px);
  margin-right: 20px;
  
  &:last-child {
    margin-right: 0;
  }
}

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