将 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

必须像这样在数学之后通过 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));
  }

Answer 2

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;
}

将 rem 减少一个百分比？

Reduce rem by a percentage?

css

sass

zurb-foundation