SASS如何计算指定数值的百分比对应值 例如10rem的2/3数值

解决方案 #

你可以根据使用场景选择以下两种实现方式：

• 方案1：Sass编译阶段计算出静态值
  Sass原生支持带单位数值的四则运算，无需额外调用特殊函数，直接计算即可：

  $width     : 10rem;
  // 编译后会得到固定值 6.66666667rem
  $calculate : $width * 2/3;
  
  // 插入calc时需要用#{}插值语法
  img { max-height: calc( 100vh - #{$calculate} ); }
  

  如果你需要沿用你之前定义的百分比变量，调整写法如下：

  $percentage : percentage(2/3); // 编译后为 66.666667%
  $width      : 10rem;
  // 百分比参与计算时除以100%消去单位即可得到正确数值
  $calculate  : $width * $percentage / 100%;
  
  img { max-height: calc( 100vh - #{$calculate} ); }
  

• 方案2：计算逻辑交给CSS calc运行时处理
  如果后续需要配合CSS变量做动态调整，可以直接把计算逻辑放到calc内：

  $percentage : percentage(2/3);
  $width      : 10rem;
  
  img { max-height: calc( 100vh - #{$width} * #{$percentage} ); }
  

  编译后生成的CSS会保留计算逻辑，由浏览器运行时解析计算结果。

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