减少rem百分比？

Question

好的，我正在使用 Foundations rem-calc 计算 rem 值，现在我想将每个媒体查询的变量大小减少一个百分比，如下所示：

// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
} 


$herotitle-size: rem-calc(125.5);


  .hero_home .herotitle{
    font-size: $herotitle-size / 10%;
  }

但它不起作用.... 为什么？

Answer 1

Sass 不允许您对具有不兼容单位的值执行算术运算。不过……

百分比只是表示小数的另一种方式。将某个值减去10% 就是将它乘以0.9（公式：(100 - $my-percentage) / 100)）。

.foo {
  font-size: 1.2rem * .9; // make it 10% smaller
}

输出：

.foo {
  font-size: 1.08rem;
}

请注意，这也适用于按百分比增加值。

.foo {
  font-size: 1.2rem * 1.1; // make it 10% bigger
}

输出：

.foo {
  font-size: 1.32rem;
}

Answer 2

必须像这样在数学之后通过 rem-calc：

    $herotitle-size: 125.5;

   //To reduce by 10% 0.1
  .hero_home .herotitle{
       font-size: rem-calc( $herotitle-size - ( $herotitle-size * 0.1));
  }